Сверстать навигационное меню семантически верно можно, используя элемент nav в HTML5. Элемент nav предназначен для обозначения области навигации на странице.

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

Например, следующий код демонстрирует семантически верное навигационное меню:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a>
      <ul>
        <li><a href="#">История</a></li>
        <li><a href="#">Команда</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Блог</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

В этом примере, элемент nav используется для обозначения области навигации на странице. Список элементов ul содержит ссылки на разделы сайта. Элемент li используется для обозначения каждого элемента списка, а элемент a используется для создания ссылок.

Дополнительные элементы ul и li используются для создания выпадающего меню в разделе “О нас”. Элемент ul является вложенным в элемент li и содержит дополнительные элементы li и a.

Кроме того, можно использовать атрибут role="navigation", чтобы указать, что элемент nav является областью навигации на странице. Это помогает обеспечить доступность для пользователей, которые используют программы чтения с экрана или другие ассистивные технологии.

<nav role="navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a>
      <ul>
        <li><a href="#">История</a></li>
        <li><a href="#">Команда</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Блог</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

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

Назад