HTML5 разметка меню

Подготовил: Евгений Рыжков Дата публикации: 30.01.2013

Многие из нас привыкли верстать меню используя списки:

<ul class="navigation">
	<li><a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a></li>
	<li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a></li>
	<li><a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a></li>
	<li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a></li>
</ul>

В HTML5 для разметки навигаций появился специальный тег <nav> и меню теперь многие начали верстать так:

<nav>
	<ul>
		<li><a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a></li>
		<li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a></li>
		<li><a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a></li>
		<li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a></li>
	</ul>
</nav>

Вроде все структурно и четко. Но есть одна пробелма — списки изначально не предназначены для разметки навигаций.

С этим недостатком в первую очередь сталкиваются пользователи голосовых браузеров, которые при переходе к меню слышат "Список из 4-х пунктов". А затем перечисление этих пунктов, при чем перед тем как назвать текст пункта будет звучать "bullet" - для неупорядоченных списков, и номер пункта для упорядоченных. Чтобы этого избежать лучше верстать навигацию так:

<nav>
	<a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a>
</nav>

А если следовать рекомендациям WAI-ARIA, то так:

<nav role="navigation">
	<a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#" >HTML и CSS приемы</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a>
</nav>

Спорить можно долго как более правильно, тем более, что role можно добавить и в обычный список. Но для себя в HTML5 разметке навигации нашел дополнительные плюсы:

  1. меньше DOM элементов, а значит страница быстрее и легче;
  2. меньше кода — лучше SEO.

Как быть с вложенным меню

Для его организации можно воспользоваться вложенным <nav> и <section> для группировки ссылок:

<nav>

	<section>
		<a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a>
		<nav>
			<a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a>
			<a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a>
			<a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a>	
		</nav>
	</section>
	
	<a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a>
	<a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a>

</nav>

Заметка

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

Материалы

Показать комментарии
Яндекс.Метрика