Что лучше в <nav>: <ul> и <li>, или прямые <a> в HTML?

Быстрый ответ

Наилучшим способом организации доступной и семантически корректной структуры навигации сайта является сочетание тегов <nav>, <ul> и <li>. Это не только облегчает взаимодействие пользователя с сайтом, но и благотворно влияет на его поисковую оптимизацию (SEO).

Пример кода:

<nav>
  <ul>
    <li><a href="#home">Главная</a></li> <!-- Напоминание о том, откуда начинается путь -->
    <li><a href="#about">О сайте</a></li> <!-- Информация о тех, кто создает магию -->
    <!-- Место для дополнительных пунктов меню -->
  </ul>
</nav>

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

Область применения и альтернативы

В веб-дизайне есть множество вариантов организации навигации. Тег <nav> не обязательно нужно всегда использовать с парой <ul> и <li>, его можно сочетать с <div> и прямыми ссылками <a>, как это делают некоторые дизайнерские фреймворки, например Bulma, для выполнения выпадающего меню.

Использование ARIA-атрибутов может сделать сайт более доступным для работы с вспомогательными технологиями. Для стилизации используйте CSS-псевдоселекторы :before и :after для расширения дизайна без добавления излишних элементов HTML.

Стремитесь к чистоте и доступности HTML-кода, избегая ненужного украшательства. Однако убедитесь, что ваша навигация понятна пользователям и обеспечивает простое взаимодействие с сайтом.

Семантика и доступность – ключевые принципы использования <nav>

Важность семантики

Использование <ul> и <li> внутри <nav> основывается на принципе семантики в веб-разработке. Эти теги формируют четкую структуру, что облегчает навигацию по сайту как пользователям, так и поисковым системам.

Подробнее об этом расскажет наш спикер на видео

Улучшение доступности

Применение <nav> в комбинации с <ul> и <li> облегчает восприятие сайта людьми, использующими вспомогательные технологии. Использование ARIA-лейблов и ориентиров помогает выделить важные области навигации и усиливает их понимание.

Рекомендации по стилизации

Стилизуйте тег <nav>, используя CSS-селекторы, которые сохраняют семантическую чистоту кода, не добавляя лишних тегов. Освойте управление стилями по умолчанию браузера для создания привлекательного и функционального дизайна.

Работа с тегом <nav>

Сложное меню? То, что нужно!

Для создания многоуровневых меню вложенные <ul> и <li> помогают организовать структуру меню, сделав её понятной как для пользователей, так и для разработчиков.

Гибкость: Советы по использованию <nav>

В зависимости от ваших дизайнерских требований, вы можете работать только с прямыми ссылками <a>, отказываясь от списка. Главное – чтобы такой подход гармонично вписывался в общую структуру сайта и не усложнял навигацию.

Сочетание с позиционированием в CSS

Расположение элементов навигации может зависеть от методов позиционирования в CSS, что в свою очередь влияет на количеству используемых DOM-элементов.

Визуализация

Воспринимайте навигацию как путешествие по лесу:

    🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳
    🌲      <nav>      🌲
    🌲  🧭[🚪]🧭[🚪]🧭  🌲 
    🌲        🧭        🌲  
    🌲 [🏞️] [🌄] [🏰]  🌲
    🌲        🧭        🌲  
    🌲  🧭[🚪]🧭[🚪]🧭  🌲 
    🌲      </nav>     🌲
    🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳

• <nav> – это ваш компас (🧭), помогающий не заблудиться.
• <ul> – это тропы (🚪), соединяющие места назначения.
• <li> – различные достопримечательности (🏞️, 🌄, 🏰).

Позвольте компасу направлять вас по тропам к уютным уголкам вашего сайта!

Практические примеры и реальные случаи использования

Больше, чем ссылки

В <nav> можно разместить больше, чем ссылки – дополнительный контекст, который поможет пользователям лучше ориентироваться на сайте.

Соблюдение семантики при дизайне

Сочетание эстетики со структурированной организацией помогает создавать семантически верные и легко читаемые веб-страницы. Используйте <ul> и <li>, когда они служат этой же цели.

Читаемость и эффективность – ключи к хорошей работе

Всякий раз, когда вы меняете структуру навигации, задайте себе вопрос: упрощает ли это взаимодействие пользователя с сайтом? Каждый элемент должен способствовать простоте погружения в пользовательский интерфейс.

Полезные материалы