Тег nav — раздел навигационных ссылок

Новые теги HTML5

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>