HTML5. Элемент nav

Продолжаем знакомится с html5.

Элемент `nav` [^]

Категории, которым принадлежит этот элемент:: Flow content.; Sectioning content.; formatBlock candidate.
Контекст, в котором этот элемент может быть использован:: Где ожидается flow content.
Контент:: Flow content.
Атрибуты:: Global attributes

Элемент nav представляет часть страницы, которая содержит ссылки на другие страницы или части на этой же странице: это секция навигационных ссылок.
Не все группы ссылок на странице должны содержаться в элементе nav - должны содержаться только те секции, которые содержат в себе основные навигационные блоки. В частности, распространенной ситуацией для футера является, когда в низу страницы располагается короткий список ссылок на разные страницы сайта, например, соглашение пользователя, домашняя страница, авторские права. Элемент footer не требует наличия элемента nav, для этих целей.

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

<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: <time>2009-04-01</time></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......more blog posts...
   </div>
   <footer>
    <p>Posted <time pubdate datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
   </footer>
  </article>
  
 </div>
 <footer>
  <p>Copyright © 2006 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 используется для того, чтобы охватить весь контент страницы, который не является ни шапкой, ни подвалом.

В следующем примере содержится 2 элемента 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>

PHP, MySQL programming blog

четверг, 15 апреля 2010 г.