Семантическая вёрстка виджетов

При создании графических компонент в первую очередь придумывается их HTML/CSS-структура.

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

Такая верстка позволяет удобно интегрировать JS и CSS.

Семантическая верстка: «сообщение об ошибке»

Рассмотрим концепцию семантической верстки на примерах.

Для начала посмотрим пример несемантической верстки для сообщения об ошибке:

<div style="color:red; border: 1px solid red">Ошибка, пароль неверен!</div>

Любая верстка с атрибутом style априори не семантическая. Атрибут style лучше использовать как можно реже.

Верстка ниже — тоже не семантическая, несмотря на использование class:

<div class="red red-border">Ошибка, пароль неверен!</div>

Её несемантичность заключается в том, что класс содержит информацию об оформлении, а не о том, что это такое.

Семантический подход — это когда класс элемента обозначает смысл информации в нём, вот так:

<div *!*class="error"*/!*>Ошибка, пароль неверен!</div>

Пусть у сообщений об ошибке будет класс error, у обычного сообщения - класс message и так далее, по смыслу.

Семантическая верстка: «меню»

Следующий пример посложнее. Это горизонтальное меню. Для начала — несемантический вариант:

<div class="small-blocks">
  <div>Главная</div>
  <div>Товары</div>
  <div>Фотографии</div>
  <div>Контакты</div>
</div>

<style>
.small-blocks div {
  ...
}
</style>

<div class="small-blocks">
  <div>Главная</div>
  <div>Товары</div>
  <div>Фотографии</div>
  <div>Контакты</div>
</div>

<style>
.small-blocks div {
  float: left;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;

  font-family: Georgia, sans-serif;

  /* кросс-браузерный градиент */
  background: -moz-linear-gradient(yellow,red);
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red));
  background: -o-linear-gradient(top, yellow, red);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=yellow,endColorstr=red,GradientType=0);
}
</style>

Какие ошибки здесь?..

Несмотря на то, что оно отображается, их несколько.

Во-первых, меню — это список, а для списка существует тег LI.

Семантический подход — это когда теги используются по назначению. Для элементов списка <li>, для адреса <address>, для заголовка таблицы <th> и т.п.

Во-вторых, класс small-blocks показывает, что содержимое должно быть оформлено как текстовые блочки. Любой класс, отражающий оформление, несемантичен.

Правильно — чтобы класс был смысловым. Например, класс primary-menu говорит о том, что смысл элемента - «главное меню». Кроме того, лучше дать подкомпонентам, т.е. кнопкам меню, свой класс. В этом случае верстка не сломается, если внутри кнопок появятся новые div.

В-третьих, элементами меню в данном случае являются ссылки. Их в данном случае целесообразно сделать <a href="...">. Даже если меню обрабатывается JavaScript, поисковик пройдет по таким ссылкам.

Вариант ниже — семантичен:

<ul class="primary-menu">
  <li class="menu-item"><a href="#">Главная</a></li>
  <li class="menu-item"><a href="#">Товары</a></li>
  <li class="menu-item"><a href="#">Фотографии</a></li>
  <li class="menu-item"><a href="#">Контакты</a></li>
</ul>


<style>
.primary-menu { ... }
.primary-menu .menu-item { ... }
.menu-item a { ... }
</style>

<ul class="primary-menu">
  <li class="menu-item"><a href="#">Главная</a></li>
  <li class="menu-item"><a href="#">Товары</a></li>
  <li class="menu-item"><a href="#">Фотографии</a></li>
  <li class="menu-item"><a href="#">Контакты</a></li>
</ul>


<style>
.primary-menu {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.primary-menu .menu-item {
  float: left;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;

  font-family: Georgia, sans-serif;

  /* кросс-браузерный градиент */
  background: -moz-linear-gradient(yellow,red);
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red));
  background: -o-linear-gradient(top, yellow, red);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=yellow,endColorstr=red,GradientType=0);
}

.menu-item a {
  color: black;
}
</style>

Зачем нужна семантическая верстка?

Зачем нужна семантическая верстка JavaScript-разработчикам? С виду все то же самое…

Семантическая верстка упрощает поддержку и развитие CSS, упрощает взаимодействие между членами команды. Это касается, например, верстальщика и JavaScript-разработчика.

Кроме того, такая верстка удобна для организации JS-кода. Например, класс open означает, что пункт меню открыт, а closed — закрыт. В коде мы просто ставим нужный класс, остальное делает CSS.

Бывает так, что у элемента появляются несколько классов, отражающих различные аспекты смысла. Например:

<ul class="primary-menu">
  <li class="menu-item *!*enabled*/!* *!*important*/!*"><a href="#">Товары</a></li>
  <li class="menu-item *!*disabled*/!*"><a href="#">Фотографии</a></li>
  <li class="menu-item enabled"><a href="#">Контакты</a></li>
</ul>
<style>
  .disabled a {
    color: gray;
 }
 ...
</style>

В JavaScript мы просто меняем классы, остальное берет на себя CSS.

По возможности, все, что можно сделать в CSS — нужно делать в нем, а не в JS.

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