Навигация
Дата публикации: 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> и автоматически будут предлагать пропустить навигацию. Однако когда такая поддержка появится у подавляющего большинства пользователей не ясно. Поэтому пока придется по старинке использовать ссылки для пропуска навигации.
Куда дальше
- следующая — Подвалы
- предыдущая — Даты и время
- содержание