Я немного поучаствовал в обсуждении непрофесиональной статьи, недавно опубликованной на хабре. В процессе обсуждения выяснилось что очень многие видя в HTML коде тег DIV автоматически начинают считать что вот оно как надо, вот она, та самая правильная вёрстка, подражание которой приведёт их к высотам мастерства, славе и деньгам.

Уважаемые начинающие верстальщики, не всё то золото что блестит. Не всякая вёрстка "без табличек" хороша, и не всё сайты, использующие табличные теги для разметки модальной сетки - убогие. Важно понимать что семантическая вёрстка это не специально придуманная высоколобыми маразматиками технология, для таких же как они отщепенцев. Это рабочий инструмент, понимание принципов которой и применение этих принципов на практике и приведёт вас к просветлению.

Строго говоря, концепция семантической верстки заложена ещё в SGML, прародителе HTML. Основной принцип прост и понятен если хоть ненадолго забыть о CSS, броузерах и их багах:

Имея текстовый документ, вам следует размечать его логически, указав его структуру при помощи тегов. Структура документа в SGML представлении всегда иерархическая.

Прошу заметить что очень часто, в реальных проектах, необходимо добавить в уже готовую иерархическую структуру документа "дополнительный врапер для всего контента" потому что без него ну никак не вырисовывается креативная задумка дизайнера. Этот, новый элемент, не имеет никакого отношения к семантике документа. Это сделка с совестью, на которою приходится идти ради денег. Это порочная практика, и этого следует избегать всеми возможными способами.

Хороший верстальщик тратит все доступное ему время проекта на решение проблем в семантике документа. Плохой верстальщик бездумно добавляет ещё один DIV.

А теперь главный вопрос, а в чем разница если мы имеем дополнительный, не семантический элемент у обоих верстальщиков? А разница в том, дорогие мои, что хороший верстальщик может сказать, показать и доказать необходимость этого дополнительного контейнера. Это не делает его код лучше или более семантическим. Но постоянное стремление к идеалу резко увеличивает профессионализм такого верстальщика.

Ну и что бы мой пост не был сплошной "водой", хочу посоветовать что же все таки почитать можно по поводу семантической вёрстки. Первое это конспект доклада "pepelsbey" для "UA Web 2008", первая и вторая части. Я не смог найти русскоязычного ресурса, где бы было лучше написано о семантике чем в этих статьях.

Немного попроще статья для начинающих - "О семантической вёрстке". Также всем начинающим в обязательном порядке необходимо ознакомится с "Учебником" Ивана Сагалаева. Иван просто и доходчиво описал технологию работы HTML+CSS, и незнание этих основ мало способствует тяге к малопонятным вещам типа "семантики". Кстати, у Ивана есть довольно провокационая статья. Эта статья это лакмусовая бумажка для верстальщика. В своё время она "навела шороху" среди верстальщиков :) Так вот если вы понимаете что реально написано в статье (подсказка, идея не в том что бы вернутся к HTML 2.0) - вы на верном пути.

И в заключение, маленькая хитрость от меня лично. Если вы хотите увидеть достаточно ли качественно размечен HTML документ. Вам надо выключить весь CSS на странице, и добавить такой код:

<style type="text/css">
div{
margin:0;
padding:0;
border:1px solid red;
}
</style>

Обратите внимание на вертикальные красные линии, чем они толще, тем больше страдает семантика вашего документа.

Эта статья изначально была опубликована на Хабре, но с недавних пор я категорически не согласен с их политикой цензурирования статей, по принципу "подходит ли текст нашим рекламодателям", так что всё переношу в свой блог. Он не такой популярный как Хабр, но и "прогибаться за деньги" мне нету необходимости. Тут все мои статьи целее будут.

Обсуждение этой статьи на Хабре.