Пошук уроків, статей та іншого контенту
Вчить позначати основні навігаційні посилання сторінки за допомогою елемента nav.
navЕлемент <nav> позначає основний блок навігації на сторінці. Усередині нього зазвичай розміщують посилання на інші сторінки або важливі розділи поточної сторінки.
<nav> — семантичний елемент HTML. Він повідомляє браузерам, пошуковим системам і допоміжним технологіям, що група посилань призначена саме для навігації.
Найчастіше навігація має такий вигляд:
<nav>
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/about.html">Про нас</a></li>
<li><a href="/contacts.html">Контакти</a></li>
</ul>
</nav>У цьому прикладі:
<nav> позначає навігаційний блок;
<ul> містить список пунктів;
<li> містить окремий пункт списку;
<a> створює посилання.
Розглянемо просту HTML-сторінку з навігацією:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Навчальний сайт</title>
</head>
<body>
<header>
<h1>Навчальний сайт</h1>
<nav>
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/courses.html">Курси</a></li>
<li><a href="/blog.html">Блог</a></li>
<li><a href="/contacts.html">Контакти</a></li>
</ul>
</nav>
</header>
<main>
<h2>Вітаємо на сайті</h2>
<p>Оберіть потрібний розділ за допомогою навігації.</p>
</main>
</body>
</html>Такий код можна зберегти у файл index.html і відкрити у браузері.
Важливо, що сам елемент <nav> не додає спеціального вигляду. Браузер покаже його як звичайний блок, а список матиме стандартні маркери. Вигляд навігації змінюють за допомогою CSS.
Наприклад:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Навігація</title>
<style>
nav ul {
display: flex;
gap: 20px;
padding: 0;
list-style: none;
}
nav a {
color: #2457a6;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/courses.html">Курси</a></li>
<li><a href="/contacts.html">Контакти</a></li>
</ul>
</nav>
</body>
</html>CSS змінює лише зовнішній вигляд. Семантичне значення навігації забезпечує саме <nav>.
navУ <nav> варто розміщувати основні групи навігаційних посилань:
головне меню сайту;
меню в заголовку або підвалі сторінки;
навігацію між розділами документа;
зміст великої статті;
навігацію в особистому кабінеті.
Наприклад, зміст статті:
<nav aria-label="Зміст статті">
<h2>Зміст</h2>
<ul>
<li><a href="#intro">Вступ</a></li>
<li><a href="#examples">Приклади</a></li>
<li><a href="#summary">Підсумок</a></li>
</ul>
</nav>
<main>
<section id="intro">
<h2>Вступ</h2>
<p>Основні поняття теми.</p>
</section>
<section id="examples">
<h2>Приклади</h2>
<p>Практичні приклади використання.</p>
</section>
<section id="summary">
<h2>Підсумок</h2>
<p>Коротке повторення матеріалу.</p>
</section>
</main>Посилання з атрибутом href="#intro" переміщує користувача до елемента з id="intro".
nav на сторінціНа сторінці може бути кілька навігаційних блоків. Наприклад, окремо головне меню та зміст статті:
<header>
<nav aria-label="Головна навігація">
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/articles.html">Статті</a></li>
<li><a href="/about.html">Про сайт</a></li>
</ul>
</nav>
</header>
<main>
<article>
<nav aria-label="Зміст статті">
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
</ul>
</nav>
<h1>Основи веброзробки</h1>
<section id="html">
<h2>HTML</h2>
<p>HTML описує структуру сторінки.</p>
</section>
<section id="css">
<h2>CSS</h2>
<p>CSS відповідає за оформлення сторінки.</p>
</section>
</article>
</main>Атрибут aria-label допомагає розрізняти кілька навігацій. Для користувача засобу читання з екрана вони матимуть назви «Головна навігація» та «Зміст статті».
Якщо на сторінці лише один очевидний блок навігації, aria-label зазвичай не потрібен:
<nav>
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/about.html">Про нас</a></li>
</ul>
</nav>navНе кожна група посилань є навігацією. Наприклад, посилання на політику конфіденційності в підвалі можна розмістити без <nav>, якщо це просто невелика група другорядних посилань:
<footer>
<p>© 2025 Навчальний сайт</p>
<a href="/privacy.html">Політика конфіденційності</a>
</footer>Також не потрібно використовувати <nav> для:
кожного окремого посилання;
посилання на джерело в тексті;
посилання на профіль автора;
усіх посилань на сторінці без групування;
кнопок, які виконують дію, а не переходять на іншу адресу.
Для дії, наприклад відкриття меню або надсилання форми, використовують <button>, а не <a> чи <nav>.
nav і структура документаЕлемент <nav> можна розміщувати в різних частинах сторінки:
у <header> — для головного меню;
у <main> — для змісту або навігації в межах розділу;
у <footer> — для додаткової навігації.
Приклад навігації в заголовку та підвалі:
<header>
<h1>Мій сайт</h1>
<nav aria-label="Головна навігація">
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/services.html">Послуги</a></li>
<li><a href="/contacts.html">Контакти</a></li>
</ul>
</nav>
</header>
<main>
<h2>Основний вміст сторінки</h2>
<p>Тут розміщено інформацію сторінки.</p>
</main>
<footer>
<nav aria-label="Навігація у підвалі">
<ul>
<li><a href="/privacy.html">Конфіденційність</a></li>
<li><a href="/terms.html">Умови використання</a></li>
</ul>
</nav>
</footer>Розташування <nav> не змінює його призначення. Головне — щоб усередині були посилання, які допомагають користувачу переходити між розділами або сторінками.
Семантичний <nav> полегшує користування сайтом для людей, які використовують програми читання з екрана. Така програма може розпізнати навігаційний блок і дозволити швидко перейти до нього або пропустити його.
Щоб навігація була зрозумілою:
Використовуйте зрозумілий текст посилань.
Не називайте різні посилання однаково, якщо вони ведуть до різних місць.
Для кількох блоків <nav> використовуйте різні aria-label.
Не замінюйте текст посилання лише зображенням без текстового опису.
Не видаляйте стилі фокусу без заміни.
Добре:
<nav aria-label="Навігація за категоріями">
<ul>
<li><a href="/books.html">Книги</a></li>
<li><a href="/courses.html">Курси</a></li>
<li><a href="/webinars.html">Вебінари</a></li>
</ul>
</nav>Гірше:
<nav>
<ul>
<li><a href="/books.html">Детальніше</a></li>
<li><a href="/courses.html">Детальніше</a></li>
<li><a href="/webinars.html">Детальніше</a></li>
</ul>
</nav>У другому прикладі без додаткового контексту складно зрозуміти призначення посилань.
div замість nav<div class="menu">
<a href="/">Головна</a>
<a href="/about.html">Про нас</a>
</div>Такий код може виглядати правильно, але він не передає браузеру семантичного значення навігації.
Краще:
<nav>
<a href="/">Головна</a>
<a href="/about.html">Про нас</a>
</nav>Для складнішого меню зазвичай використовують список:
<nav>
<ul>
<li><a href="/">Головна</a></li>
<li><a href="/about.html">Про нас</a></li>
</ul>
</nav>nav для кожного посилання<nav>
<a href="/article.html">Читати статтю</a>
</nav>Одне посилання, яке не є окремою навігацією, зазвичай не потребує <nav>.
<nav>
<a href="/search.html">
<img src="search.svg" alt="">
</a>
</nav>Якщо зображення є єдиним вмістом посилання, його alt має пояснювати призначення:
<nav aria-label="Додаткові дії">
<a href="/search.html">
<img src="search.svg" alt="Пошук">
</a>
</nav>Однак для звичайної навігації простий текст часто зрозуміліший:
<nav aria-label="Додаткові дії">
<a href="/search.html">Пошук</a>
</nav>Посилання призначене для переходу:
<a href="/profile.html">Профіль</a>Кнопка призначена для дії на поточній сторінці:
<button type="button">Відкрити меню</button>Елемент <nav> може містити кнопку керування меню, але саму навігацію утворюють саме посилання.
<nav> позначає блок основних навігаційних посилань.
Усередині <nav> зазвичай використовують <ul>, <li> і <a>.
Елемент <nav> додає семантичне значення, але не оформлення.
На сторінці може бути кілька блоків <nav>.
Для розрізнення кількох навігацій використовують aria-label.
Не кожну групу посилань потрібно обгортати в <nav>.
Зрозумілий текст посилань важливий для доступності.
<a> використовують для переходів, а <button> — для дій.