Семантическая верстка — советы и решения. Часть первая. Капля теории, DTD и ластики

Эта публикация, написанная для русского издания PC Magazine, в которой рассказывается о приёмах семантической вёрстки. Первая часть: немного теории, DTD и ластики. Уровень —начинающие

Вступление

В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны. Изначально, таблицы были выбраны дизайнерами и разработчиками для верстки по одной единственной причине — не существовало других средств реализации хоть сколько-нибудь сложных макетов. Со временем таблицы стали нормой и остаются ею до сих пор. Но мы уже не в девяностых и браузеры, которые значатся в наших технических заданиях, способны интерпретировать CSS на том уровне, который необходим для более корректной, структурированной и современной верстки. Именно ее мы называем семантической. Слово на первый взгляд довольно расплывчато, но в то же время лишено недостатков более популярного термина «бестабличная», который подразумевает всего лишь отказ от использования таблиц при реализации макетов. На самом деле все куда сложнее. Под семантической версткой мы подразумеваем следующее:

  1. Таблицы используются для табличных данных, а не для визуального позиционирования элементов. К сожалению, мы живем не в идеальном мире и не всегда удается обойтись без этого архаизма, многие макеты просто требуют табличного поведения. Но перед тем как использовать таблицу не по назначению, каждый разработчик должен не раз подумать и попытаться избежать этого. Во многих случаях это вполне реально.
  2. Каждый элемент HTML-кода должен нести структурный смысл. Наилучший способ этого добиться — просмотреть вашу страницу с отключенным CSS. Если списки визуально остались списками, а заголовки заголовками, то вы уже близки к семантике, к которой следует стремиться любому профессиональному верстальщику.
  3. Разрабатываемый вами код соответствует стандартам (X)HTML и CSS. Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.
Статья по теме:  В Вордпресс не работает кнопка добавить файл и многое другое

Данная статья не предназначена для совсем новичков и не претендует на статус учебного пособия, но пытается ответить на вопросы, часто возникающие у верстальщиков при попытке изменить табличным привычкам и перейти на семантическую верстку.

Проблемы кроссбраузерности и их решения

Правильный DOCTYPE

Правильный DOCTYPE — это то, с чего должен начинаться любой сайт. Вы можете написать трижды правильный (X)HTML и СSS-код, но с неправильным или отсутствующим DOCTYPE он не будет валидным и, что самое ужасное, будет работать неправильно. Согласно спецификациям HTML и XHTML тег DOCTYPE, указанный в первой строке документа, указывает браузеру, какую именно версию (X)HTML вы используете в своем документе. Без указания DOCTYPE браузер будет воспринимать ваш документ в режиме Quirks Mode, что приведет, в частности, к неправильной интерпретации блочной модели. Правильный DOCTYPE обязан содержать полный абсолютный путь к файлу DTD, хранящемуся на серверах w3.org. Использование правильного DOCTYPE — первый и необходимый путь к валидной кроссбраузерной верстке. В этой статье мы используем указанный выше XHTML 1.0 Strict. Посмотреть правильные DOCTYPE, а также подробнее узнать о практическом значение этого тега можно в статье Джеффри Зельдмана «Почему так важен DOCTYPE».

Ластики

Одна из самых пространенных причин того, что сайт выглядит по-разному в разных браузерам вызвана тем, что браузеры по умолчанию оформляют многие элементы по-своему. Для примера возьмем небольшой код:

<fieldset>
    <legend>Авторизация</legend>
    <label for="login">Логин:</label>
    <input id="login" maxlength="15" type="text" />
    <label for="password">Пароль:</label>
    <input id="password" maxlength="15" type="password" />
</fieldset>

Взгляните на результат в Firefox 2.0 (слева) и Internet Explorer 6 (справа): Разница вызвана тем, что разные браузеры имеют различные значения для полей (margin) и отступов (padding). Разумеется, если задать конкретные величины в правилах для нужных элементов, то все исправится, но можно поступить проще.Существует замечательный селектор *, который выбирает все элементы в документе. Таким образом мы можем заранее обнулить значения для отступов и полей и в дальнейшем задавать их только тогда, когда дефолтные значения нас не устраивают. Эта, на первый взгляд мелочь, поможет вам избежать множества незначительных, но трудно находимых кроссбраузерных несоответствий и просто ошибок в процессе имплементации дизайна. Добавим чуть-чуть CSS:

* {margin:0;padding:0;}

и посмотрим на результат: Результат Уже гораздо ближе к тому кроссбраузерному сооветствию, что мы ищем. Подход к использованию «ластиков» у каждого свой и подобные стили по умолчанию каждый верстальщик должен выработать для себя самостоятельно. Это, как и стиль написания HTML и CSS, должно стать профессиональной привычкой, значительно увеличивающей вашу личную производительность. Ластики от Yahoo: YUI 2: Reset CSS


Понравилась статья? Поделиться с друзьями: