Навигация сайта. Тег nav
Навигация сайта. Тег nav
На одной веб-странице можно использовать несколько элементов nav. Например, один элемент навигации для перехода по страницам на сайте, а другой - для перехода внутри html-документа.
Не все ссылки обязательно помещать в элемент nav. Например, некоторые ссылки могут не представлять связанного блока навигации, например, ссылка на главную страницу, на лицензионное соглашение по поводу использования сервиса и подобные ссылки, которые часто помещаются внизу страницы. Как правило, их достаточно определить в элементе footer, а элемент nav для них использовать необязательно.
Используем элемент nav для создания навигационного меню:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Семантическая разметка в HTML5</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
<article>
<header>
<h2>Рассказ в двух частях</h2>
</header>
<nav>
<ul>
<li><a href="#part1">Часть 1</a></li>
<li><a href="#part2">Часть 2</a></li>
</ul>
</nav>
<div>
<section id="part1">
<h2>Часть 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
</section>
<section id="part2">
<h2>Часть 2</h2>
<p>There are many variations of passages of Lorem Ipsum available..</p>
</section>
</div>
<footer>
</footer>
</article>
<footer>
<p><a href="/license">Лицензионное соглашение</a> | <a href="/about">О сайте</a> | <a href="/donation">Donations</a></p>
<p><small>© Copyright 2023 Coursme.</small></p>
</footer>
</body>
</html>
В данном случае определены два блока nav - один для межстраничной навигации, а другой - для навигации внутри страницы.
Необязательно все ссылки помещать в элементы nav. Так, в данном случае ряд ссылок располагаются в элементе footer.
Заключение
Элемент <nav> в HTML5 предоставляет гибкую возможность создания навигационных блоков как для межстраничных переходов, так и для внутренних ссылок внутри документа. Важно использовать его с учетом семантического контекста и размещать ссылки, подходящие для навигационных блоков, улучшая структурирование и понимание веб-страницы
Будьте первым