Семантическая верстка

2010

Родион Быков - 09/08/2010

Отличие "семантической" верстки состоит в логической связи между элементами HTML страницы. При верстке семантически-корректной HTML-страницы преследуются несколько целей:

Облегчение просмотра страницы без использования или с ограниченным использованием CSS;
Облегчение автоматического просмотра HTML-страниц роботами;
Поисковая оптимизация;
Облегчение "просмотра" документа не-текстовыми браузерами;
Улучшение понимания кода всеми членами команды разработчиков;
Оптимизация длины и структуры кода;
Дополнительные возможности управлением и анализа кода (микроформатирование).

Кроме того, семантическая верстка предлагает некоторые рекомендации и паттерны для получения лучшего результата HTML верстки.

Можно выделить несколько "уровней" семантической верстки:

Логика размещения и комплектации элементов;
Логика именование элементов;
Комбинирование именованных элементов.

Комплектация элементов

Главными элементами, которыми манипулирует верстальщик, это DIV, P, H1-H6, UL+LI, DL+DD+DT, FORM, TABLE. В семантической верстке есть некоторые стандартные подходы (паттерны), хотя свободу импровизации никто не отнимает. Вот некоторые паттерны:

P - для текстов, часто в P встречается размещение логотипа;
H1-H6 - для заголовков (хотя и очевидно, но часто нарушается);
UL+LI - для breadcrumbs, организации меню, каталогов продуктов в магазине, изображений в галерее;
DL+DD+DT - для страницы отдельного продукта в магазине (картинка + характеристики товара), для страницы одного поста в блоге и его комментариев;
FORM - использование очевидно, обязательно использовать FIELDSET и LABEL, LEGEND по желанию. Это повышает релевантность и помогает разным браузерам отображать форму корректно;
TABLE - незаменима для верстки HTML-рассылок (Outlook и другие почтовые клиенты не всегда корректно работают с CSS), хорошо для отображения больших объемов данных. При использовании обязательно применяются THEAD, TH, а также COL для манипуляции со стилями отдельной колонки;
DIV - в HTML тексте они должны встречатся в порядке, который бы увидел пользователь отключив CSS. Например сначала располагается header, за ним content, за ним menu и замыкает sidebar. При этом, скажем, браузер мобильного телефона сможет более-менее читаемо отобразить сайт даже без использования CSS.

Именование элементов

Как правило, проекты не разрабатываются одним человеком. Орфорграфически грамотное и наполненное смыслом название элемента поможет другому члену команды разработчиков быстро понять назначение элемента. Например:

DIV id="content" - для основного контейрера сайта;
DIV id="comments" - для комментариев к статье;
LI class="selected" - для выделенного элемента списка;
LABEL for="inputname" - для элементов формы.

Комбинирование именованных элементов

На сегодня такой подход находит применение в микроформатах. Комбинирование особым образом именованных элементов помогает автоматическому разбору страницы браузерами и другими клиентами. Яркий пример - микроформат hCard - визитная карточка. Например:

 Jeremy Keith, Clearleft 

С одной стороны, это обычный HTML, который с помощью CSS можно заставить выглядеть как требуется на странице. С другой стороны, это микроформат, который можно "распарсить" и сохранить в адресной книге. Таким образом, в обычную с виду HTML страницу "вплетен" дополнительный смысл. Пока что микроформаты - лишь рекомендации и не носят статуса стандарта. Однако ситуация может измениться с распространением мобильных браузеров и совершенно новых устройств доступа к Сети.

Отдельное спасибо за материал специалисту по созданию интерфейсов Наталье Шпак.