Тег <nav>: навигация
Отмечает основной блок навигации: меню сайта, оглавление, список разделов.
1. Что это и зачем
Отмечает основной блок навигации: меню сайта, оглавление, список разделов.
Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.
2. Синтаксис и пример
<nav><ul><li><a href="/">Главная</a></li></ul></nav>Запись выше — базовый вариант использования. Обратите внимание, как тег
3. Нюансы и частые варианты
У большинства тегов есть атрибуты, уточняющие поведение: у ссылки — адрес, у картинки — источник и alt, у поля — имя и тип. Полный список атрибутов конкретного тега смотрите в базовом курсе HTML на этом сайте.
В реальной разметке тег
4. Как это работает под капотом
Каждый тег — это элемент разметки, который сообщает браузеру, какую роль играет его содержимое: заголовок, абзац, ссылка, картинка. Документ строится как дерево таких элементов: одни вкладываются в другие, и браузер по этому дереву строит модель DOM, с которой потом работают CSS и JavaScript.
5. Совместимость и поддержка
Тег поддерживается всеми современными браузерами и не требует префиксов. Старые браузеры игнорируют незнакомые теги, но HTML-парсер при этом не «ломается»: страница просто покажет содержимое без разметки, поэтому безопасно использовать тег и дополнять его CSS-стилями.
6. Распространённые ошибки
7. Практическое задание
Оберните меню сайта в nav с вложенным списком ссылок.
Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.
8. Как применять в проектах
В реальном проекте тег встраивается в типовые конструкции страницы: боковые колонки, карточки, формы, меню. Комбинируйте его с семантическими обёртками и следите, чтобы вложенность отражала смысл, а не только форму.
Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.
9. Чек-лист перед сдачей
- тег выбран по смыслу, а не «потому что так свёрстал сосед»;
- вложенность корректна: закрывающий тег на месте (если он обязателен);
- нужные атрибуты заданы, alt и lang заполнены;
- значение тега не дублирует соседний элемент без нужды;
- вкладка в DevTools показывает именно ожидаемое дерево DOM;
10. Как закрепить
Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.