Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
КупитьEPUB/PDF
Карта учебника
вернуться к уроку

Семантическое меню

важность: 5
See More

Посмотрите на вёрстку горизонтального меню.

<div class="rounded-horizontal-blocks">
  <div class="item">Главная</div>
  <div class="vertical-splitter">|</div>
  <div class="item">Товары</div>
  <div class="item">Фотографии</div>
  <div class="item">Контакты</div>
</div>
/*+ hide="Результат со стилями (показать стили)" */
.rounded-horizontal-blocks .item {
  float: left;
  padding: 6px;
  margin: 0 2px;
  border: 1px solid gray;
  border-radius: 10px;
  cursor: pointer;
  font-size: 90%;
  background: #FFF5EE;
}

.vertical-splitter {
  float: left;
  padding: 6px;
  margin: 0 2px;
}

.item:hover {
  text-decoration: underline;
}

Что делает эту вёрстку несемантичной? Найдите 3 ошибки (или больше).

Как бы вы сверстали меню правильно?

Открыть песочницу для задачи.

Несмотря на то, что меню более-менее прилично отображается, эта вёрстка совершенно не семантична.

Ошибки:

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

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

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

    Правильно – чтобы класс был смысловым. Например, <ul class="menu"> будет говорить о том, что смысл элемента – «меню».

  3. В-третьих, элемент .vertical-splitter. Здесь класс вполне семантичен, этот элемент списка является вертикальным разделителем, так что здесь всё в порядке. Но на этот раз несемантичность – в содержимом.

    Мы, по возможности, стараемся, чтобы HTML содержал именно информацию, а символ вертикальной черты| выполняет чисто оформительскую функцию.

    Поэтому от него следует либо вообще избавиться, либо переместить в CSS при помощи ::before.

И, наконец, это не обязательно и не ошибка, но обычно элементы, которые являются ссылками или кнопками, оформляют в <a> или <button>.

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

<ul class="menu">
  <li class="menu__item"><a href="#">Главная</a></li>
  <li class="menu__vertical-splitter"></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>

Дополнительно, классы помечены префиксом компонента, на тот случай, если в заголовках появится произвольный HTML.

Открыть решение в песочнице.