HTML: Меню
В прошлом уроке в шапке сайта мы использовали просто список для обозначения меню. Чтобы дать возможность роботам и различным устройствам быстрее определить главное меню сайта, используется парный тег 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
обычно используется только для главных навигационных областей, поэтому дополнительные меню (например, в футере) не оборачиваются в nav
. Обратите внимание, что навигационных панелей в теге nav
может быть и несколько. Нередко в тег nav
оборачивают меню разделов. На сайте интернет-магазина таким меню может быть список категорий товаров. Так как эта панель является одной из основных для навигации по сайту, имеет смысл обернуть её в соответствующий тег.
Задание
Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег nav
и маркированный список
Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.