nav элементов представляет раздел страницы, объединяющий ссылки на другие страницы или части на странице — раздел навигационных ссылок.
Note: Не все группы ссылок на странице должны быть в nav элементе, он предназначен прежде всего для разделов, которые состоят из основных блоков навигации. В частности, он является общим для колонтитулов, которые имеют короткий список ссылок на различные страницы сайта, такие как условия обслуживания, домашняя страница, а также авторские страницы. header элемента достаточно только для таких случаев, в то время как nav элемент может быть использован в таких случаях, как правило, ненужной.
Note: Агенты пользователей (таких как программы чтения с экрана), которые ориентированы на пользователей, которые могут извлечь выгоду из навигационной информации опущены в начальной визуализации, или кто может извлечь выгоду из навигационной информации, являющейся доступной прямо сейчас, можете использовать этот элемент как способ определить, какой контент на странице на начальном этапе перехода и/или предоставить по запросу.
В следующем примере, на странице есть несколько мест, где имеются ссылки, но только одно из этих мест считается разделом навигации.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<div>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
<div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</div>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
<span itemprop="copyrightHolder">The Example Company</span>
</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
Обратите внимание как div элементы используются, чтобы обернуть все содержимое страницы, кроме верхнего и нижнего колонтитула, и все содержимое блога, помимо его верхнего и нижнего колонтитула.
Вы также можете увидеть микроданные в приведенном выше примере, которые используют schema.org словарный запас, чтобы указать дату публикации и другие метаданные о блоге.
В следующем примере, есть два nav элемента, по одному для основной навигации по сайту, и один для вторичной навигации по самой странице.
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
nav элемент не обязательно должен содержать список, он может содержать и другие виды контента. В этом блоке навигации, приводятся ссылки в прозе:
<nav> <h1>Navigation</h1> <p>You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. Far up thus mountain you can spy a little figure who appears to be me, desperately scribbling a <a href="/school/thesis">thesis</a>.</p> <p>To the west are several exits. One fun-looking exit is labeled <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="http://isp.example.net/">ISP™</a>.</p> <p>To the south lies a dark and dank <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly out of the page.</p> </nav>
