Вернёмся к примеру из прошлых уроков:
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<div id="menu"> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
</header>
В нём меню сайта размечено с помощью обычного тега <div> с идентификатором menu. Как известно, такое обозначение работает для разработчиков, но не для браузеров. Они не понимают, что это меню, а не просто обёртка для списка.
Для создания полноценного меню используется парный тег <nav>, задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.
Заменим <div id="menu"></div> на изученный тег <nav>:
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
Элемент nav, как и header не является уникальным для страницы. Его можно использовать для любого меню на странице, но есть несколько рекомендаций:
nav. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег <nav>, хотя это не запрещено.nav — навигация по текущей странице.nav может содержать не только ссылки, но также и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег <nav>.Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег <nav> и маркированный список
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Оборачивайте в элемент навигации только основные меню сайта или отдельной страницы. Дополнительные меню не нуждаются в обёртке в тег <nav>
Навигация может быть в любой области страницы, а не только в шапке сайте