Key Takeaways

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

] Можно с уверенностью предположить, что этот элемент будет отображаться практически в каждом проекте. NAV представляет именно то, что это подразумевает: группа навигационных ссылок. Хотя наиболее распространенное использование для NAV будет для завершения неупорядоченного списка ссылок, есть и другие варианты. Вы также можете обернуть элемент NAV вокруг абзаца текста, в котором содержались основные навигационные ссылки для страницы или раздела страницы. В любом случае элемент NAV должен быть зарезервирован для навигации, которая имеет основное значение. Таким образом, рекомендуется избегать использования NAV для краткого списка ссылок в нижнем колонтитуле.

Nav и доступность

Образец дизайна, который вы, возможно, видели, реализованный на многих сайтах, - это ссылка «Skip Navigation». Идея состоит в том, чтобы позволить пользователям считывателей экрана быстро пропустить основную навигацию вашего сайта, если они уже услышали ее - в конце концов, нет смысла слушать все навигационное меню большого сайта каждый раз, когда вы проникаете на новую страницу! Элемент NAV имеет потенциал для устранения этой потребности; Если читатель экрана видит навигацию Элемент, он может позволить своим пользователям пропустить навигацию, не требуя дополнительной ссылки. В спецификации говорится: Пользовательские агенты (такие как считыватели экрана), которые предназначены для пользователей, которые могут извлечь выгоду из навигационной информации, опущенной при первоначальном рендеринге, или которые могут извлечь выгоду из немедленно доступной информации о навигации, могут использовать этот элемент как способ определения контента на странице, чтобы первоначально пропустить и/или предоставить по запросу. Текущие читатели экрана не распознают NAV, но это не значит, что вы не должны его использовать. Помощные технологии будут продолжать развиваться, и, вероятно, ваша страница будет в Интернете в будущем. Сейчас, установив стандарты, вы гарантируете, что по мере того, как читатели экрана улучшатся, ваша страница со временем станет более доступной.

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

] Вы многое встретите термин пользовательского агента при просмотре по спецификациям. На самом деле, это просто причудливый термин для браузера - программного «агента», которое пользователь использует для доступа к содержанию страницы. Причина, по которой спецификации не говорят «браузер», заключается в том, что пользовательские агенты могут включать считывателей экрана или любые другие технологические средства для чтения веб -страницы. Вы можете использовать NAV более одного раза на данной странице. Если у вас есть основная навигационная панель для сайта, это потребовало бы элемента NAV. Кроме того, если у вас был вторичный набор ссылок, указывающих на разные части текущей страницы (с использованием якоря на странице), это также может быть завершено в элемент NAV. Как и в разделе, были некоторые споры о том, что представляет собой приемлемое использование NAV и почему он не рекомендуется в некоторых обстоятельствах (например, внутри нижнего колонтитула). Некоторые разработчики считают, что этот элемент подходит для лиц или хлебных ссылок или для формы поиска, которая представляет собой основное средство навигации по сайту (как в случае с Google). Это решение в конечном итоге будет зависеть от вас, разработчика. Ян Хиксон, основной редактор спецификации HTML5 от WhatWG, ответил напрямую: «Используйте [IT] всякий раз, когда вы использовали Class = NAV». [См. Комментарий] это выдержка из HTML5 & CSS3 для реального мира, Алексис Гольдштейн, Луи Лазарис и Эстель Вейл. ]

ищет больше учебных пособий?

] Если вы хотите узнать больше о элементе HTML5 NAV, SitePoint имеет большой ассортимент онлайн -учебных пособий в меню HTML5 NAV. Создание интерактивной навигационной панели Лоры Атанасиу «Прямая навигационная структура может повысить удобство использования вашего сайта и облегчить поиск информации. Используя базовые HTML и CSS, вы можете построить горизонтальную батонку NAV, которая обеспечивает взаимодействие, когда пользователь зависает над навигационной ссылкой». Создание анимированного раскрывающегося меню навигации в HTML5/CSS3 и Webkit от Жана-Пьер Гассина «Это учебник для начинающих и промежуточных разработчиков HTML5 и CSS3, которые хотят создать выпадающее меню. Меню, которое мы создаем, анимировано только с использованием CSS… нет Javascript в поле зрения!» Создайте отзывчивый, мобильный сайт с нуля: Semantic Html от Annarita Tranfici «Во-первых, давайте создадим классическое меню. Следует ли определить навигацию в списках? Крейг Баклер «Вопрос: необходимы ли элементы списка?» Как построить раздвижное меню CSS3 от Крейга Баклера.

часто задаваемые вопросы о элементе HTML5 NAV

]

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

, как мне использовать элемент HTML5 NAV?

, чтобы использовать элемент HTML5 NAV, вам просто нужно обернуть свои навигационные ссылки в тегатах

и

. Например:
этот код создаст навигационную панель со ссылками на раздел 1 и раздел 2. Page? Каждый элемент NAV должен содержать уникальный набор навигационных ссылок. Это может быть полезно для создания отдельных навигационных стержней для различных разделах вашей страницы.

необходимо ли использовать элемент NAV для всех навигационных ссылок? Это связано с тем, что элемент NAV помогает в улучшении доступности вашего веб -сайта, облегчая пользователям навигацию по вашему контенту.

я могу гнездовать элементы NAV в других элементах?

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

] Как элемент NAV влияет на SEO? Используя элемент NAV для определения ваших навигационных ссылок, вы можете помочь поисковым системам понять взаимосвязь между различными страницами или разделами вашей страницы.

Могу ли я стилизовать элемент NAV с CSS? Вы можете применить любые свойства CSS к элементу NAV, как и любой другой элемент HTML. Например, вы можете изменить цвет фона, размер шрифта и край вашей навигационной панели. Хотя оба элемента могут использоваться для навигации, элемент NAV более подходит для основных навигационных блоков, в то время как элемент меню более подходит для контекстных меню. Тем не менее, вы можете использовать полифилл, чтобы добавить поддержку элемента NAV в более старых браузерах. Элемент NAV помогает в улучшении доступности и SEO вашего веб -сайта, поэтому рекомендуется использовать его для основных навигационных блоков.

]