Просмотров: 1 196

Элемент nav

тегории Контекст, в котором может быть использован: Контентная модель:
потоковый контент, секционирующий контент, явный контент. в потоковом контенте. потоковый контент.

Выдержки из спецификации:

Элемент nav содержит в себе раздел страницы, в котором находятся ссылки на другие страницы или на какие-либо части в пределах текущей страницы. Он является разделом с навигационными ссылками.

Не все ссылки на странице должны быть в элементе nav. В первую очередь он предназначен для разделов, которые содержат главные навигационные блоки. В частности, это относиться к нижней части сайта (footer), которая содержит короткий список ссылок на различные страницы сайта, такие как условия облуживания, главная страница и страница копирайта.

В следующем примере, страница имеет несколько мест, где присутствуют ссылки, но только в одном из них ссылки рассматриваются как навигационный раздел.

<body>
 <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: 2009-04-01
</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>
   <header>
    <h1>My Day at the Beach</h1>
   </header>
   <div>
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </div>
 <footer>
  <p>Copyright © 2010
The Example Company
  </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 используются для обрамления всего контента страницы, за исключением элементов header и footer.

В следующем примере, есть два элемента 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="http://dev.w3.org/html5/spec/single-page.html#public">Public demonstrations</a></li>
<li><a href="http://dev.w3.org/html5/spec/single-page.html#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>