Добавление навигационных блоков
Элемент 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.
