Добавление навигационных блоков
Элемент nav
обозначает раздел документа, который содержит ссылки на другие страницы или другие части той же страницы. Очевидно, что не все гиперссылки должны находиться в элементе nav
. Цель использования этого элемента заключается в определении основных разделов навигации документа. В таблице 10-8 представлен элемент nav
.
Таблица 10-8: Элемент nav
Элемент | nav |
Тип элемента | Потоковый |
Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы, но этот элемент не может быть потомком элемента address |
Локальные атрибуты | Нет |
Содержание | Потоковый контент |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Да |
Изменения в HTML5 | N/A |
Соглашение по стилям | nav { display: block; } |
В листинге 10-6 показано, как используется элемент nav
.
Листинг 10-6: Использование элемента nav
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
h1, h2, h3 {
background: grey;
color: white;
}
hgroup > h1 {
margin-bottom: 0;
margin-top: 0;
}
hgroup > h2 {
background: grey;
color: white;
font-size: 1em;
margin-top: 0px;
margin-bottom: 2px;
}
body > header *, body > footer * {
background: transparent;
color: black;
}
body > section, body > section > section,
body > section > section > section {
margin-left: 10px;
}
body > header, body > footer {
border: medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
body > nav {
text-align: center;
padding: 2px;
border: dashed thin black;
}
body > nav > a {
padding: 2px;
color: black;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>Things I like</h1>
<h2>by Adam Freeman</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">Fruits I Like</a></li>
<ul>
<li><a href="#morefruit">Additional Fruits</a></li>
</ul>
<li><a href="#activitiesilike">Activities I Like</a></li>
<ul>
<li><a href="#tritypes">Kinds of Triathlon</a></li>
<li><a href="#mytri">The kind of triathlon I am
aiming for</a></li>
</ul>
</ul>
</nav>
</header>
<section>
<header>
<hgroup>
<h1 id="fruitsilike">Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
</header>
I like apples and oranges.
<section>
<h1 id="morefruit">Additional fruits</h1>
I also like bananas, mangoes, cherries, apricots, plums,
peaches and grapes.
<section>
<h1>More information</h1>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</section>
</section>
</section>
<section>
<header>
<h1 id="activitiesilike">Activities I like</h1>
</header>
<section>
<p>
I like to swim, cycle and run. I am in training for my first
triathlon, but it is hard work.
</p>
<h1 id="tritypes">Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint, Olympic and so on.
<section>
<h1 id="mytri">The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
</section>
<nav>
More Information:
<a href="http://fruit.org">Learn More About Fruit</a>
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
<footer id="mainFooter">
©2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
</footer>
</body>
</html>
Я добавил в документ несколько элементов nav
, чтобы дать представление о гибкости этого элемента. Первый элемент nav
предоставляет пользователю навигацию по документу. Я использовал элементы ul
, li
и a
, чтобы создать иерархический набор относительных гиперссылок. На рисунке 10-8 видно, как это отображается в браузере.
Рисунок 10-8: Использование элемента nav
для создания раздела навигации по контенту

Я поместил этот элемент nav
внутрь основного элемента header
документа. Это не является обязательным, но я хотел показать, что это основной элемент nav
. Обратите внимание, что я смешал в нем элемент h1
с другим контентом. Элемент nav
может содержать любой потоковый контент, а не только гиперссылки. Я добавил второй элемент nav
в конец документа, предоставляя пользователю некоторые ссылки для получения дополнительной информации. На рисунке 10-9 видно, как браузер отображает все это.
Рисунок 10-9: Использование элемента nav
для обеспечения навигации к внешним ресурсам

В обоих случаях с элементами nav
я добавил стили в элемент style
в документе, чтобы можно было визуально отличить дополнительные элементы. Соглашение по стилям для элемента nav
не обозначает явное содержание элемента nav
.