HTML-тег <nav>

HTML-тег <nav> используется для определения раздела веб-страницы, содержащего навигационные ссылки. Этот элемент предназначен для меню, оглавлений и любых других групп ссылок, используемых для навигации по сайту. Разметка разделов навигации тегом <nav> улучшает семантическую структуру и доступность вашего сайта.

Элемент <nav> следует использовать только для значимых навигационных блоков, а не для ссылок внутри абзацев или разделов, не связанных с навигацией по сайту.

Базовый синтаксис HTML-тега <nav>

Базовая структура тега <nav> : 

<nav>
    Navigation links go here.
</nav>

Содержимое тега <nav> обычно состоит из элементов <a> (якорных).

Базовый пример HTML-тега <nav>

Вот простой пример навигационного меню с использованием тега <nav> : 

<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Welcome to My Website</h1>
        </header>

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>

        <main>
            <p>This is the main content of the page.</p>
        </main>

        <footer>
            <p>Copyright © 2024</p>
        </footer>
    </body>
</html>
Базовый пример HTML-тега nav

Пояснение: Тег <nav> оборачивает список ссылок на другие страницы, делая семантически ясным, что этот раздел предназначен для навигации.

Использование нескольких элементов <nav>

Вы можете использовать несколько элементов <nav> на веб-странице, если навигация зависит от контекста. Например: 

<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>My Blog</h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <article>
                <h2>Blog Post</h2>
                <p>Content of the blog post goes here.</p>

                <nav>
                    <ul>
                        <li><a href="#comments">Comments</a></li>
                        <li><a href="#related">Related Posts</a></li>
                    </ul>
                </nav>
            </article>
        </main>

        <footer>
            <p>Copyright © 2024</p>
        </footer>
    </body>
</html>
Использование нескольких элементов навигации

Пояснение: Первый элемент <nav> обеспечивает навигацию по всему сайту, а второй предоставляет контекстно-зависимые ссылки внутри записи в блоге.

Стилизация тега <nav> с помощью CSS

Вы можете стилизовать элемент <nav> и его ссылки, чтобы создать визуально привлекательные навигационные меню: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            nav {
                background-color: #007BFF;
                padding: 10px;
            }

            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                display: flex;
            }

            nav ul li {
                margin-right: 15px;
            }

            nav ul li a {
                color: white;
                text-decoration: none;
                font-weight: bold;
            }

            nav ul li a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>
Стилизация тега nav с помощью CSS

Результат: Панель навигации отображается с синим фоном, белыми ссылками и эффектами наведения, которые подчеркивают ссылки.

Практическое применение тега <nav>

  • Навигация по веб-сайту: определение основных меню для навигации по веб-сайту.
  • Поднавигация: обеспечивает локальную или специфичную для раздела навигацию.
  • Хлебные крошки: представляют собой навигационную цепочку для руководства пользователя.
  • Оглавление: создайте структурированный список ссылок для навигации по длинному документу или статье.