Семантика

Семантика в языкознании — это значение, смысл слова, речевого оборота, грамматической формы. В верстке этот термин означает, в общем-то, нечто вполне похожее. Под семантичной (или, как вариант, семантической) разметкой понимается, в широком смысле, внимательное отношение к смысловой нагрузке тех или иных структурных единиц при написании кода.

На базовом уровне речь идет об использовании элементов HTML-разметки строго по их прямому назначению. К примеру, структурную единицу, по смыслу являющуюся заголовком первого уровня, необходимо размечать тегом <h1> и только им — другие элементы разметки для этого не подходят по своему назначению. Верно и обратное: использовать тег <h1> надлежит для разметки только и только такого элемента, смысловая роль которого — заголовок первого уровня. (Обычно заголовок первого уровня — это заглавие документа в целом, и такой элемент употребляется на странице в единственном экземпляре. Хотя спецификации HTML отнюдь не запрещают использование множественных элементов <h1> — ну, это к вопросу о духе и букве.)

Можно выделить и другие, более высокие уровни семантики. Следующий уровень — грамотное именование классов и идентификаторов элементов HTML-разметки. Названия этим классам и идентификаторам следует назначать в соответствии со смысловой нагрузкой соответствующих элементов. Широко распространенная в среде разработчиков практика отталкиваться в именовании классов и идентификаторов от особенностей визуального представления элементов, с точки зрения духа веб-стандартов, является глубоко ошибочной и порочной.

Приведу простой пример для наглядности. Предположим, дизайн некоторого сайта предполагает использование цветового выделения дат публикации свежих новостей в блоке с информацией о текущих обновлениях. Скажем, оранжевым. Казалось бы, ничто не мешает нам разметить соответствующие элементы примерно следующим образом: <span class="orange">07.06.2011</span>, определив стилевые правила для класса orange в CSS-коде. А теперь представьте, что спустя некоторое время нам захотелось модифицировать цветовую схему новостного блока — ну, допустим, изменить выделение дат публикации новостей с оранжевого на синее. Конечно, можно было бы оставить код разметки в покое, заменив только соответствующее стилевое правило, но в таком случае старое, неактуальное уже название класса станет противоречить здравому смыслу и вносить лишнюю путаницу в и без того трудную жизнь — по-хорошему, код разметки надо бы тоже поправить. А вот если бы мы сразу поименовали соответствующий класс в соответствии с его смысловой нагрузкой — ну, например, как-то вроде newsdate, — описываемой проблемы не возникло бы в принципе. Кстати, в HTML5 для разметки информации о дате и времени предусмотрен специальный элемент <time>. Так что, если вы используете в верстке сайта именно HTML5, то совсем правильным было бы применение для обсуждаемых целей вот этого самого элемента <time> вместо семантически нейтрального <span>.

Даже если в верстке вашего сайта применяются элементы с абсолютно одинаковым стилевым оформлением, но с различными смысловыми ролями — не используйте для них один и тот же класс! Ведь ситуация может измениться. Это вовсе не означает, что она обязательно изменится при жизни сайта, но категорически исключать такую возможность — по меньшей мере недальновидно.

На еще более высоком уровне семантики речь заходит о различных штуках, позволяющих наделять те или иные элементы какими-либо дополнительными метаданными (облегчающими возможную машинную обработку контента) уже сверх уровня обычной HTML-разметки. Примерами соответствующих технологий являются микроформаты, Microdata и RDFa.

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