Навигация

Одна из наиболее важных частей сайта — это панель навигации. Например, на CNN.com в верхней части страницы есть табы, которые ведут на новости разных направлений: «Технологии», «Здоровье», «Спорт» и т.д. На страницах результатов поиска Google, так же имеются ссылки, которые предлагают поиск в разных сервисах : «Картинки», «Видео», «Карты». Пусть на нашей тестовой странице тоже будет навигация: ссылки, которые ведут на основные разделы сайта («Главная», «Блог», «Галерея», «О компании»).

Обычно навигация размечается как-то так:

<div id="nav">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">blog</a></li>
		<li><a href="#">gallery</a></li>
		<li><a href="#">about</a></li>
	</ul>
</div>

Для HTML5 этот код тоже будет верным. Но эта разметка представляет собой просто список, состоящий из четырех ссылок. Просматривая код, ты скорей всего сообразишь, что это и есть блок с навигацией. Но семантически, этот блок — это просто список с ссылками.

Кому нужна эта семантика для навигации? Во-первых, людям с ограниченными способностями. Чем она им помогает? Ситуация-пример №1: ты ограничен в движении, и с трудом можешь использовать мышь или вообще не можешь. Чтобы это компенсировать, можно воспользоваться надстройкой для браузера, которая поможет легко перемещаться по ссылкам навигации. Ситуация-пример №2: ты плохо видишь. Чтобы бороздить Интернет, используешь специальную программу — устройство для чтения с экрана (sсreenreader). Первое ,что он почитает для тебя — это заголовок статьи. Вторая по важности информации на странице — это навигация. Если тебя не заинтересовал заголовок, сообщаешь программе, чтобы та перешла к навигации и озвучила тебе ссылки. Удобно, когда есть возможность быстро «прыгать» от содержимого к навигации. Да и вообще, с программной точки зрения важно уметь найти навигацию на странице.

Поэтому в использовании <div id=»nav»> нет ничего плохого. Навигация на сайте работать будет. Но если есть желание сделать сайт более доступным и семантически более правильным, тогда следует использовать HTML5 элемент <nav>:

<nav>
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">blog</a></li>
		<li><a href="#">gallery</a></li>
		<li><a href="#">about</a></li>
	</ul>
</nav>

Куда дальше

• следующая — Подвалы
• предыдущая — Даты и время
• содержание