Главная страница   /   10.5. Добавление навигационных блоков (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

10.5. Добавление навигационных блоков

Элемент 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">
		&#169;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.