Эта публикация, написанная для русского издания PC Magazine, в которой рассказывается о приёмах семантической вёрстки. Первая часть: немного теории, DTD и ластики. Уровень —начинающие
Вступление
В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны. Изначально, таблицы были выбраны дизайнерами и разработчиками для верстки по одной единственной причине — не существовало других средств реализации хоть сколько-нибудь сложных макетов. Со временем таблицы стали нормой и остаются ею до сих пор. Но мы уже не в девяностых и браузеры, которые значатся в наших технических заданиях, способны интерпретировать CSS на том уровне, который необходим для более корректной, структурированной и современной верстки. Именно ее мы называем семантической. Слово на первый взгляд довольно расплывчато, но в то же время лишено недостатков более популярного термина «бестабличная», который подразумевает всего лишь отказ от использования таблиц при реализации макетов. На самом деле все куда сложнее. Под семантической версткой мы подразумеваем следующее:
- Таблицы используются для табличных данных, а не для визуального позиционирования элементов. К сожалению, мы живем не в идеальном мире и не всегда удается обойтись без этого архаизма, многие макеты просто требуют табличного поведения. Но перед тем как использовать таблицу не по назначению, каждый разработчик должен не раз подумать и попытаться избежать этого. Во многих случаях это вполне реально.
- Каждый элемент HTML-кода должен нести структурный смысл. Наилучший способ этого добиться — просмотреть вашу страницу с отключенным CSS. Если списки визуально остались списками, а заголовки заголовками, то вы уже близки к семантике, к которой следует стремиться любому профессиональному верстальщику.
- Разрабатываемый вами код соответствует стандартам (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;}
и посмотрим на результат: 
