Навигация

Подготовили: Евгений Рыжков и Татьяна Головко Дата публикации: 12.03.2011

Одна из наиболее важных частей сайта — это панель навигации. Например, на 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>

В: будут ли ссылки для пропуска навигации совместимыми с элементом <nav>? Нужны ли они вообще в HTML5?

О: Такие ссылки полезны пользователям которые не имеют возможности использовать мышь. С появлением HTML5 по идее браузеры и устройства для чтения с экрана научаться распознавать элемент <nav> и автоматически будут предлагать пропустить навигацию. Однако когда такая поддержка появится у подавляющего большинства пользователей не ясно. Поэтому пока придется по старинке использовать ссылки для пропуска навигации.

Куда дальше

Показать комментарии