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

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

          <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 ошибки (или больше).

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

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

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

Ошибки:

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

Семантический подход – это когда теги используются по назначению. Для элементов списка <li>, для адреса <address>, для заголовка таблицы <th> и т.п.
Во-вторых, класс rounded-horizontal-blocks показывает, что содержимое должно быть оформлено как скруглённые горизонтальные блоки. Любой класс, отражающий оформление, несемантичен.

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

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