Menu html5: Обзор элементов HTML5 “Menu” и “Menuitem”

Верстка меню на html5 | Vaden Pro

Вы здесь

Главная → Блог → HTML → Верстка меню на html5

Раздел: 

Не так давно в свет вышел новый стандарт разметки гипертекста html5, который открыл перед веб-мастерами огромный простор для улучшения понимания структуры сайта поисковыми роботами. Изменения коснулись и подходов к разметке навигации.

При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:

<ul>
   <li><a href="#">Пункт меню 1</a></li>
   <li><a href="#">Пункт меню 2</a></li>
   <li><a href="#">Пункт меню 3</a></li>
</ul>

Ну а что? Все крайне логично и лаконично. Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?

Новый подход к верстке меню в html5

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

<nav>
   <ul>
      <li><a href="#">Пункт меню 1</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 3</a></li>
   </ul>
</nav>

На первый взгляд все прекрасно, да и на второй ошибок особо здесь нет, НО! Списки предназначены просто для перечисления чего-либо по порядку. Они не предназначены для разметки навигации. И если раньше у нас особо не было выбора как размечать навигацию, то в новых реалиях все значительно упростилось.

Для того, чтобы поисковый робот понял, что перед ним находится элемент навигации по сайту одного наличия тега nav уже более чем достаточно. А дальше мы можем все максимально упростить:

<nav>
   <a href="#"> Пункт меню 1</a>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:

• Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
• Меньше тегов — короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
• Чем лаконичнее код, тем он чище и проще к восприятию.

Как сверстать вложенные меню в html5?

Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:

<nav>
   <section>
      <a href="#"> Пункт меню 1</a>
      <nav>
         <a href="#"> Подпункт меню 1</a>
         <a href="#"> Подпункт меню 2</a>
         <a href="#"> Подпункт меню 3</a>
      </nav>
   </section>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

Используя тег section мы объединяем группу ссылок в 1 логический элемент меню,  дальше же действуем по принципу схожему с принципом вложенности списков: используя второй nav внутри первого мы сообщаем о принадлежности ссылок в этом теге к более низкому уровню навигации, тобишь говорим, что ссылки которые будут в нем содержаться это уже не пункты, а подпункты нашего меню.

Эта конструкция хоть и не привычна на первый взгляд, но все-же во многом проще, чем аналогичная структура выполненная списками.

Подводя итоги

Хоть подход с использованием списков во многом и устарел, но ничего плохого в нем по-прежнему нет. Упростить код или же нет зависит во многом от Вашего желания и особенностей проекта.

К примеру, если для оформления меню нужны дополнительные элементы, на которые нужно повесить всякие прикольные фишки в css, то лучше использовать списки, которые их вам предоставят, чем лепить вокруг ссылок пустые дивы.

Ключевые слова: 

Меню сайта

Еще интересное

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

Главная/ Учимся Javascript, CSS, HTML/ Тегофеншуй — шаг к новому уровню качества HTML кода/ Accessibility/ HTML5 разметка меню

Дата публикации: 30.01.2013

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

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

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

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

Вроде все структурно и четко.

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

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

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

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

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

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

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

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

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

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

Заметка

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

Материалы

• Navigation in Lists: To Be or Not To Be
• HTML5 Accessibility Chops: section elements
• W3C :: The Roles Model

Теги: семантический HTML, навигация, доступность, HTML5

html — Альтернативы для элемента меню HTML5 типа панели инструментов?

спросил 9 лет, 5 месяцев назад

Изменено 9 лет, 4 месяца назад

Просмотрено 4к раз

Я пытаюсь создать меню с помощью HTML5 (введите панель инструментов). Оказывается, ни один браузер в настоящее время не поддерживает тип панели инструментов. (Спасибо, Зак, что указал мне на это) Какая будет лучшая реализация, которая работает для Chrome и Firefox?

В настоящее время я думаю о том, чтобы продолжить использовать элемент меню в соответствии со спецификацией HTML5 и использовать CSS для его стилизации по мере необходимости и JS для добавления поведения.

• html
• меню

4

Следующая публикация списка рассылки объясняет текущее намерение для меню типа панели инструментов:

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

из http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Dec/0264.html

Следовательно, я осмеливаюсь сказать, что могу использовать меню для всех браузеров, даже если браузер явно не поддерживает семантику элемента меню HTML5, потому что он все равно будет отображать его как блок, поскольку пользовательские агенты, которые я проверил (например, firefox, chrome, safari, т. е.), меню стиля с display: block.

Если вы готовы использовать немного jquery, и если я понимаю ваш вопрос, то простой

 

        

            <ул>
                
 Сводка
                
Избранное
                
Настройка
            
        

 

поможет.

подробнее о виджетах панели навигации читайте здесь: http://demos.jquerymobile.com/1.4.1/navbar/

1

Я бы взглянул на загрузочное меню, оно работает (IMO) почти как панель инструментов и широко поддерживается во многих браузерах.

Он также содержит глификоны, так что вы можете легко добавлять значки кнопок рядом с метками

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Семантическая навигация с помощью элемента nav

Одним из новых элементов HTML 5 является элемент