Элемент nav

Последнее обновление: 08.04.2016

Элемент nav призван содержать элементы навигации по сайту. Как правило, это ненумерованный список с набором ссылок.

На одной веб-странице можно использовать несколько элементов nav. Например, один элемент навигации для перехода по страницам на сайте, а другой - для перехода внутри html-документа.

Не все ссылки обязательно помещать в элемент nav. Например, некоторые ссылки могут не представлять связанного блока навигации, например, ссылка на главную страницу, на лицензионное соглашение по поводу использования сервиса и подобные ссылки, которые часто помещаются внизу страницы. Как правило, их достаточно определить в элементе footer, а элемент nav для них использовать необязательно.

Используем элемент nav для создания навигационного меню:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Семантическая разметка в HTML5</title>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="/">Главная</a></li>
				<li><a href="/blog">Блог</a></li>
				<li><a href="/contacts">Контакты</a></li>
			</ul>
		</nav>
		<article>
			<header>
				<h2>Рассказ в двух частях</h2>
			</header>
			<nav>
				<ul>
					<li><a href="#part1">Часть 1</a></li>
					<li><a href="#part2">Часть 2</a></li>
				</ul>
			</nav>
			<div>
				<section id="part1">
					<h2>Часть 1</h2>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
					Lorem Ipsum has been the industry...</p>
				</section>
				<section id="part2">
					<h2>Часть 2</h2>
					<p>There are many variations of passages of Lorem Ipsum available..</p>
				</section>
			</div>
			<footer>
				
			</footer>
		</article>
		<footer>
			<p><a href="/license">Лицензионное соглашение</a> | 
			<a href="/about">О сайте</a> | 
			<a href="/donation">Donations</a></p>
			<p><small>© Copyright 2016 MyCorp.</small></p>
		</footer>
	</body>
</html>
Элемент nav в HTML5

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

Необязательно все ссылки помещать в элементы nav. Так, в данном случае ряд ссылок располагаются в элементе footer.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850