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

Не так давно в свет вышел новый стандарт разметки гипертекста 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, то лучше использовать списки, которые их вам предоставят, чем лепить вокруг ссылок пустые дивы.

• 2468 просмотров

Понравилась статья? Расскажите о ней друзьям:

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

Тег | HTML справочник

Значение и применение

Тег <menu> используется для контекстных меню, панелей инструментов и для включения элементов управления формы.

Тег <menuitem> определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.

В настоящее время тег <menu> имеет ограниченную поддержку браузерами.

Поддержка браузерами

Атрибуты

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <menu></title>
	</head>
	<body>
		<div contextmenu = "testmenu"> <!-- определяем, для блока контекстное меню --> 
			Кликни по мне правой кнопкой мыши.
			<menu type = "context" id = "testmenu"> <!-- создаем контекстное меню --> 
				<menuitem label = "like"></menuitem> <!-- определяем первый элемент меню --> 
				<menuitem label = "dislike"></menuitem> <!-- определяем второй элемент меню --> 
			</menu>
		</div>
	</body>
</html>

Кликни по мне правой кнопкой мыши.

Для тех у кого браузер не отображает результат:

Отличия HTML 4.01 от HTML 5

Значение CSS по умолчанию

menu {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
padding-left: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML5 разметка меню — Xiper.net

Автор: Евгений Рыжков Дата публикации: 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>

Заметка

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

Материалы

Создание плавающего HTML меню с использованием jQuery и CSS.

На связи Андрей Бернацкий.

С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Впрочем, без лишних слов начинаем рассматривать нашу первую статью по данной теме.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую скачать исходный код, чтоб он у Вас был под рукой.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Также результат того, что мы будем делать, Вы можете посмотреть здесь.

Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.

Что мы строим

В этой статье описывается, как создать «плавающее меню» с использованием HTML, CSS и JQuery. Подчеркиваю, плавающее меню остается видимым, даже если вы прокрутите вниз веб-страницу. Они анимационные, поэтому движутся вверх и вниз при прокрутке окна браузера, вверх или вниз. Я собираюсь показать вам, как сделать плавающим меню с помощью JQuery и CSS, и мы надеемся, что появятся новые ученики JQuery:D.

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

Шаг 1

Давайте начнем с HTML разметки для приятного меню, состоящего из трех суб-меню:

<div> <ul> <li><a href=»#»> Home </a></li> </ul> <ul> <li><a href=»#»> Table of content </a></li> <li><a href=»#»> Exam </a></li> <li><a href=»#»> Wiki </a></li> </ul> <ul> <li><a href=»#»> Technical support </a></li> </ul> </div>

Это основа разметки, которую мы будем использовать. Основную часть в этом небольшом коде выполниет

Похожие статьи:

Комментарии Вконтакте: