Содержание:
HTML5 - Элемент nav
Статья, в которой рассматривается HTML-элемент nav из категории sectioning.
Назначение элемента nav
Элемент nav предназначен для создания секции в документе, содержимое которой представляет собой навигацию.
Навигация - это фрагмент кода, содержащий ссылки на другие страницы сайта или на разделы этой же страницы. Навигацию обычно оформляют в виде маркарированного списка (ul), элементы li которого содержат элементы a (ссылки). Такой образ представления навигации является самым простым и понятным для поисковых роботов.
<!-- Секция на странице, содержащая навигацию -->
<nav>
<ul>
<li><a href="/">Главная</a>
<li><a href="news.html">Новости</a>
<li><a href="blog.html">Блог</a>
<li><a href="about.html">О блоге</a>
</ul>
</nav>
Не все группы ссылок на странице должны находиться в элементе nav. Элемент nav в первую очередь предназначен для группирования основных блоков навигации.
Например, авторы большинства сайтов в футере размещают ссылки на различные страницы сайта (Условия использования, Правила сайта, Главная страница, О сайте). В этом случае использовать элемент nav для их группировки не рекомендуется, т.к. данная навигация не является основной.
Пользовательские агенты, такие как программы чтения с экрана, могут извлечь выгоду из навигационной информации. Например, при чтении HTML-страницы они будут знать, что это за фрагмент кода и могут в зависимости от желания пользователя пропустить или предоставить его.
Внимание: Элемент
nav не может содержать в качестве своего потомка элемент main.Применение элемента nav
В качестве примера рассмотрим страницу, содержащую 2 элемента nav. Первый из этих элементов будет представлять навигации по сайту, а второй - навигацию по странице.
<body>
<h1>Мой сайт</h1>
<!--Навигация по сайту-->
<nav>
<h2>Навигация по сайту</h2>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="html.html">Статьи по HTML</a></li>
<li><a href="html.html">Статьи по CSS</a></li>
<li><a href="html.html">Статьи по JavaScript</a></li>
</ul>
</nav>
<!-- Основное содержимое страницы (статья) -->
<article>
<!-- Заголовок статьи -->
<header>
<h2>Название статьи</h2>
<p>Дополнительная информация...</p>
</header>
<!-- Навигация по этой странице (статье) -->
<nav>
<h3>Содержание статьи:</h3>
<ul>
<li><a href="#section1">Раздел 1</a></li>
<li><a href="#section2">Раздел 2</a></li>
<li><a href="#section3">Раздел 3</a></li>
</ul>
</nav>
<div>
<!-- 1 раздел статьи -->
<section id="section1">
<!-- Заголовок раздела -->
<h3>Раздел 1</h3>
<!-- Содержимое 1 раздела -->
<div>...</div>
</section>
<!-- 2 раздел статьи -->
<section id="section2">
<!-- Заголовок раздела -->
<h3>Раздел 2</h3>
<!-- Содержимое 2 раздела -->
<div>...</div>
</section>
<!-- 3 раздел статьи -->
<section id="section3">
<!-- Заголовок раздела -->
<h3>Раздел 3</h3>
<!-- Содержимое 3 раздела -->
<div>...</div>
</section>
</div>
<!-- Футер статьи -->
<footer>
...
</footer>
</article>
<!-- Футер страницы -->
<footer>
<p>Мой сайт, 2015.</p>
</footer>
</body>
Элемент nav не обязательно должен содержать навигацию в виде списка. Навигация также может быть представлена другим контентом.
Например, рассмотрим следующий вариант навигации сайта:
<nav> <h1>Навигация</h1> <p>Вы находитесь на моей главной странице. Это отправная точка, с которой Вы можете путешествовать по моему ресурсу. Если Вы хотите познакомиться с моими записями, то переходите в <a href="blog">"Мой блог"</a>. Если Вам интересны проекты, над которыми я сейчас работаю, то переходите в <a href="laboratory">"Мою лабораторию</a>. А если Вы хотите увидеть мои разработки или приобрести их, то переходите в раздел <a href="ready">"Готовые решения"</a>.</p> <p>У Вас есть вопросы ко мне или Вы хотите узнать больше информации об проектах, то посетите страницу <a href="about">"О блоге"</a>.</p> </nav> </p>
Чтобы пользовательские агенты знали, что этот блок на сайте — это основной блок навигации. Например, это может быть полезно, если пользователь использует программу чтения с экрана, которая понимает данные блоки. Данная программа например может пропустить данный блок, или по запросу пользователя прочитать какие разделы на сайте у тебя ещё есть. Кроме этого и поисковые роботы возможно используют это или будут это использовать в будущем. Т.е. с помощью данного элемента можно передать смысл этого контента, т.е. что это навигация.
Но это делать никто не заставляет, хочешь сделать блок более семантическим (т.е. добавить к нему смысла) делай, не хочешь — не делай.