Рассуждения о семантике кода HTML с примерами

Семантика кода HTML всегда является горячим вопросом. Некоторые разработчики стараются всегда писать семантический код. Другие критикуют догматичных приверженцев. А некоторые даже понятия не имеют о том, что это такое и зачем оно нужно. Семантика определяется в HTML в тегах, классах, ID, и атрибутах, которые описывают назначение, но не задают точно содержание, которое в них заключено. То есть речь идет о разделении содержания и его формата.

Начнем с очевидного примера.

Плохая семантика кода

<div class="article">
  <div class="article_title">Заголовок статьи</div>
  <div class="the_content">Текст статьи, который кем-то написан.
     <div class="darkbold">А автор</div> Инко Гнито.</div>
</div>

Хорошая семантика кода

<article>
  <h1>Заголовок статьи</h1>
  <p>Текст статьи, который кем-то написан.
	<b>Инко Гнито</b> - ее автор.</p>
</article>

Вне зависимости от того, считаете ли вы, что HTML5 готов к использованию или нет, наверняка использование тега <article> в данном случаем будет более привлекательным, чем обычный <div> с указанием класса. Название статьи становится заголовком, содержание становится параграфом, а выделенный жирным шрифтом текст становится тегом <b> .

Но не все так четко представляется тегами HTML5. Давайте рассмотрим набор имен классов и разберемся с тем, отвечают ли они требованиям семантики.

<div class="column_1"></div>

Не семантический код. Это классический пример. Каждая рабочая среда CSS для модульной сетки использует такого типа имена классов для определения элементов сетки. Будет ли это "yui-b", "grid-4", или "spanHalf" - такие имена ближе к заданию разметки, чем к описанию содержания. Однако их использование в большинстве случаев неизбежно при работе с шаблонами модульных сеток.

<div class="footer"></div>

Семантический код. Нижний колонтитул (footer) приобрел устойчивое значение в веб дизайне. Это нижняя часть страницы, которая содержит такие элементы как повторяющаяся навигация, права использования, информацию об авторе и так далее. Данный класс определяет группу для всех этих элементов без их описания.

Если вы перешли к использованию HTML5, то лучше применять элемент <footer> в таких случаях. Замечание касается и всех остальных частей веб страницы (верхний колонтитул должен быть <header>, боковая панель - <aside>, и так далее). Ну а если вы еще не прониклись силой HTML5 (наверно у вас есть действительно важная причина), то эквивалентные имена классов будут прекрасной заменой тегам.

<div class="largeText"></div>

Не семантический код. Он точно определяет содержание. Но почему текст должен быть большим? Чтобы выделяться среди другого более мелкого текста? "standOut" (выделение) больше подходит в данном случае. Вы можете решить изменить стиль для выделяющего текста, но ничего не делать с его размером, и в таком случаем название класса может привести вас в замешательство.

<div class="priority-2"></div>

Семантический код. В данном случае речь идет об определении уровня важности элемента в интерфейсе приложения (например, параграфа или кнопки). Элемент с более высоким уровнем может иметь яркие цвета и больший размер, а элементы с низким уровнем могут содержать больше содержания. Но точного определения стилей в данном случае нет, поэтому код является семантическим. Данная ситуация очень похожа на использование тегов  <h1>, <h2>, <h3>, и так далее, но к другим элементам интерфейса.

<div class="copyright"></div>

Семантический код. Если бы каждое имя класса можно было так четко определить! В данном случае мы имеем описание раздела, который имеет содержание, назначение которого легко описать, также как и "tweets", "pagination" или "admin-nav".

Не семантический код. В данном случае речь идет о задании стиля для первого параграфа на странице. Такой прием используется для привлечения внимания читателей к материалу. Лучше использовать имя "intro", в котором отсутствует упоминание элемента. Но еще лучше использовать селектор для таких параграфов, например article p:first-of-type или h1 + p.

<div class="clearfix"></div>

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

Не семантический код. Слишком детальное описание формата содержания. Лучше подобрать другое имя, которое будет описывать содержание, а не его формат.

<div class="success"></div>

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

<div class="plain-jane"></div>

Не семантический код. В данном примере имеется попытка задать определение формата содержания, а не его назначения. "plain-jane" очень похоже на "normal" или "regular". Идеальный код CSS должен быть написан так, чтобы не возникало необходимости в именах класса наподобие "regular", которые описывают формат содержания.

<div class="entry-unrelated"></div>

Не семантический код. Такого типа классы обычно используются для определения элементов сайта, которые не должны включаться в цепочку ссылок. В данном случае лучше использовать что-то наподобие rel=nofollow для ссылок, но не класс для всего содержания.

<div class="hyphenate"></div>

Не семантический код. Здесь имеется попытка описать формат содержания, а не его назначение.

<a class="link" href="#"></a>

Не семантический код. Тег ссылки сам по себе определяет ее. Если в данном случае имелась попытка выделить ссылку среди других, то лучше использовать описание типа "почему", например, "book-link" или "button".

Допустим, что у вас на сайте есть две статьи. И вы желаете задать им разные стили. "Обзоры фильмов" будут иметь голубой фон, а "Горячие новости" - красный фон и шрифт большего размера.

Один из способов решить задачу такой:

<article class="movie-review">
   ...
</article>

<article class="breaking-news">
   ...
</article>

Другой способ такой:

<article class="blueBg">
   ...
</article>

<article class="redBg bigText">
   ...
</article>

Наверняка, если опросить нескольких разработчиков о том, какой код более соответствует требованиям семантики, большинство укажет на первый вариант. Он отлично соответствует материалу данного урока: описание назначение без ссылок на форматирование. А второй вариант указывает на формат ("blueBg" - имя класса, которое сформировано из двух английских слов, означающих "голубой фон"). Если вдруг будет принято решение поменять дизайн обзоров фильмов - например, сделать зеленый фон, то имя класса "blueBg" превратится в кошмар разработчика. А имя "movie-review" позволит абсолютно спокойно изменять стили оформления с сохранением отличного уровня поддержки кода.

Но никто не утверждает, что первый пример лучше во всех без исключения случаях. Допустим, что определённый оттенок синего используется во многих местах на сайте. Например, он является фоном для некоторой части нижнего колонтитула и областей в боковой панели. Вы можете воспользоваться следующим селектором:

.movie-review,
footer > div:nth-of-type(2),
aside > div:nth-of-type(4) {
   background: #c2fbff;
}

Эффективное решение, так как цвет определяется только в одном месте. Но такой код становится сложным для поддержки, так как имеет длинный селектор, сложный для визуального восприятия. Также потребуются другие селекторы для определения уникальных стилей, что приведет к повторению кода. Или вы можете использовать другой подход и оставить их разделёнными:

.movie-review {
   background: #c2fbff;
   /* Определение цвета */
}

footer > div:nth-of-type(2) {
   background: #c2fbff;
   /* И еще одно */
}

aside > div:nth-of-type(4) {
   background: #c2fbff;
   /* И еще одно */
}

Такой стиль помогает сохранять CSS файл более организованным (разные области определяются в разных разделах). Но платой является повторение определений. Для больших сайтов определение одного и того же цвета может доходить до нескольких тысяч раз. Ужасно! Вариантом решения может быть использование класса по типу "blueBg" для определения цвета один раз и вставки его в HTML коде, когда требуется использовать данный дизайн. Конечно, его лучше назвать "mainBrandColor" или "secondaryFont", чтобы отвязаться от описания форматирования. Можно пожертвовать семантикой кода в пользу сохранения ресурсов.

• Комментарии