Что такое nav в HTML5?
HTML тег
.
Обычно в этом теге располагаются приоритетные ссылки на сайте. На одной странице может быть использовано несколько таких тегов. Кроме того, нельзя вкладывать данный тег в тег address.
Атрибуты:
- У этого тега нет специальных атрибутов, но вы можете использовать все универсальные теги, такие как title.
Пример:
Сайт по программированию
Чебурашка и крокодил Гена
Добро пожаловать!
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 5 | 11.1 | 5 | 4 |
| 4.4 | 4 | 11.1 | 4.2 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- Знакомство с HTML
- Что всё это значит?
- Элемент
Nav html что это
Тег (от англ. navigation — навигация) задаёт навигацию по сайту.
Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько в документе. Запрещается вкладывать внутрь .
Демо¶
Секции и заголовки
Синтаксис¶
nav>ссылкиnav> Закрывающий тег обязателен.
Атрибуты¶
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
html> head> meta charset="utf-8" /> title>navtitle> head> body> header> h1>Чебурашка и крокодил Генаh1> header> nav> a href="page/1.html">Чебурашкаa> | a href="page/2.html">Генаa> | a href="page/3.html">Шапоклякa> | a href="page/4.html">Ларискаa> nav> article> h2>Добро пожаловать!h2> article> body> html> Nav html что это
Удобный тег, объединяющий элементы навигации по сайту.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Алёна Батицкая ,
- Вадим Макеев
Обновлено 18 апреля 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
В контейнере можно собрать ссылки для навигации по сайту.
Пример
Скопировать ссылку «Пример» Скопировано
-
, поскольку элементы меню однотипные по смыслу и связаны между собой:
Как понять
Скопировать ссылку «Как понять» Скопировано
В контейнер помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег парный, всегда нужно закрывать < / nav>.
На странице можно использовать несколько .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
У нет уникальных атрибутов, применяются все глобальные атрибуты.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� — это один из ориентиров (landmark), которые скринридеры могут использовать для навигации по странице. То есть можно перейти прямо в блок навигации по сайту, это очень удобно.
�� Спецификация рекомендует не увлекаться разметкой всех ссылок на странице с помощью , достаточно указать самые важные.
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Создадим так называемые «хлебные крошки» — ссылки на страницы, указывающие на разделы, в которых находится текущая страница:
nav border-bottom: 1px solid black;> .crumbs ol list-style-type: none; padding-left: 0;> .crumb display: inline-block;> .crumb a position: relative;> .crumb a::after content: ">"; position: absolute; padding: 0 5px; color: #ffffff; font-size: 80%;>nav border-bottom: 1px solid black; > .crumbs ol list-style-type: none; padding-left: 0; > .crumb display: inline-block; > .crumb a position: relative; > .crumb a::after content: ">"; position: absolute; padding: 0 5px; color: #ffffff; font-size: 80%; >
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� — это набор функционально важных ссылок по разделам сайта. Важно выделить , чтобы поисковик понял, что находится в блоке навигации.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Навигация может быть не только по страницам внутри сайта, но и по внешним ресурсам. Например, блок с перечислением компаний-партнёров со ссылками на их сайты. В этом случае также вполне уместно использовать .