1.4Важнейшие аспекты концепции веб-стандартов

Прежде мы уже выделяли такие аспекты концепции современных веб-стандартов, как семантика и вавлидность. Теперь рассмотрим их предназначение подробнее.

1.4.1Семантика

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

1) На базовом уровне речь идет об использовании элементов HTML-разметки строго по их прямому назначению.

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

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

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

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

Кстати, в HTML5 для разметки информации о дате и времени предусмотрен специальный элемент <time>. Так что, при использовании в верстке сайта именно HTML5, совсем правильным было бы применение для обсуждаемых целей вот этого самого элемента <time> вместо семантически нейтрального <span>.

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

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