Статьи

Взгляд на HTML5 Nav элемент

Можно с уверенностью предположить, что этот элемент появится практически в каждом проекте. nav Хотя наиболее распространенное использование для nav Вы также можете обернуть элемент nav

В любом случае элемент nav Поэтому рекомендуется избегать использования nav

навигация и доступность

Шаблон дизайна, который вы, возможно, видели на многих сайтах, это ссылка «Пропустить навигацию» Идея состоит в том, чтобы позволить пользователям программ чтения с экрана быстро пропустить основную навигацию вашего сайта, если они уже слышали ее — в конце концов, нет смысла слушать все меню навигации большого сайта каждый раз, когда вы переходите на новую страницу!

Элемент nav если программа чтения с экрана видит элемент nav В спецификации говорится:
Пользовательские агенты (такие как программы чтения с экрана), предназначенные для пользователей, которым может быть полезна навигационная информация, которая не указывается при первоначальном рендеринге, или которые могут извлечь выгоду из доступности навигационной информации, могут использовать этот элемент как способ определить, какой контент на страницу, чтобы изначально пропустить и / или предоставить по запросу.

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

Что такое пользовательский агент?

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

Вы можете использовать nav Если у вас есть основная панель навигации для сайта, для этого потребуется элемент nav

Кроме того, если бы у вас был вторичный набор ссылок, указывающих на разные части текущей страницы (с использованием привязок внутри страницы), это тоже можно было бы обернуть в элемент nav

Как и в случае с sectionfooter Некоторые разработчики считают, что этот элемент подходит для нумерации страниц или ссылок, а также для формы поиска, которая представляет собой основное средство навигации по сайту (как в случае с Google).

Это решение в конечном итоге будет зависеть от вас, разработчика. Ян Хиксон, основной редактор спецификации HTML5 WHATWG, ответил на вопрос напрямую: «используйте [это] всякий раз, когда вы бы использовали class = nav». [ См. Комментарий ]

Это отрывок из HTML5 и CSS3 для реального мира , автор Алексис Гольдштейн, Луи Лазарис и Эстель Вейль.

Ищете больше уроков?

Если вы хотите узнать больше об элементе HTML5 NAV, Sitepoint предлагает большой выбор интерактивных руководств по навигационным меню HTML5.

Создание интерактивной навигационной панели от Laura Athanasiou «Простая навигационная структура может повысить удобство использования вашего сайта и упростить поиск информации. Используя базовый HTML и CSS, вы можете создать горизонтальную панель навигации, которая обеспечивает взаимодействие, когда пользователь наводит курсор на навигационную ссылку ».

Жан-Пьер Гассен: « Анимированное раскрывающееся меню навигации в HTML5 / CSS3 и Webkit» «Это учебное пособие для начинающих и средних разработчиков HTML5 и CSS3, которые хотят создать раскрывающееся меню. Меню, которое мы создаем, анимировано с использованием только CSS… JavaScript не видно! »

Создайте адаптивный мобильный сайт с нуля: семантический HTML от Аннариты Транфики «Прежде всего, давайте создадим классическое меню. В этом случае наиболее подходящим для наших целей элементом является элемент nav, который является семантическим элементом, используемым для объявления навигационного раздела веб-сайта ».

Должна ли навигация определяться в списках? Крейг Баклер: «Вопрос: нужны ли элементы списка?»

Как создать скользящее меню CSS3 от Крейга Баклера «В этой статье мы собираемся создать скользящее меню, используя только CSS. Если вы используете современный браузер, он также покажет прекрасный эффект 3D-страницы ».