В последнее время получил распространение термин «семантическая вёрстка». В своих постах по HTML и CSS буду уделять ему особое внимание. Что это такое и как я понимаю его? Семантическая вёрстка подразумевает:

1. разделение структуры документа и его оформления;
2. использование тегов HTML по своему функциональному назначению (h1, h2 и т.д. для заголовков; ul, ol, li — для списков; table, tr, td — для представления табличных данных и т.д.);
3. именование идентификаторов и названий классов элементов документа в соответствии с их смысловой нагрузкой в документе, вне зависимости от положения и оформления.

Какие ещё бывают типы вёрсток? Я использую следующую классификацию типов вёрстки: Примеры. Сразу приведу примеры, а затем дам описание каждого способа. В качестве примера возьмём варианты вёрстки для заголовка, меню и контента.

Табличная:

«Дивная» (блочная, слоями):

Семантическая:

Итак, в чём же отличия этих типов вёрстки? Табличная — исторически самый первый тип, т.к. позволял верстать кроссбраузерные страницы в то время, когда поддержка каскадных таблиц стилей оставляла желать лучшего. Преимуществом является стабильность макета при различном наполнении. Характеризуется большой избыточностью кода, что затрудняет его сопровождение, слабой гибкостью при переформатировании документов, низкой доступностью (т.е. возможностью работы с документом людям с ограниченными способностями. В России, к сожалению, проблемам доступности не уделяется должного внимания). «Дивная» (блочная, слоями) — тип вёрстки, позволяющий отказаться от табличной разметки, но применяемый многими разработчиками с отступлениями от понятий семантики: использование элементов не по назначению (точнее, неиспользование более подходящих по смыслу элементов, например, div вместо h1) и именование идентификаторов и классов в соответствии с положением или оформлением блоков (top-block, red-header в примере). Семантическая — позволяет максимально уменьшить код, улучшить структуру и читабельность документов. К сожалению, на довольно крупных проектах при работе над сайтом целой команды она становится недостижимым идеалом частично из-за недостаточных знаний технологов, которые занимаются разработкой сайтов, частично из-за ограниченных временных рамок, когда табличное решение, возможно, будет внедрено в кратчайший срок. Так же при редактировании клиентами контента сайта вряд ли большинство из них представляют себе понятие семантики.

Теги: Верстка