Тег <nav>

Тег <nav> (укр. – “навігація”) використовується для визначення секції веб-сторінки, яка містить навігаційні посилання. Цей тег допомагає структурувати сторінку, вказуючи на елементи, що використовуються для переміщення між розділами сайту чи зовнішніми ресурсами.

Використання <nav> покращує доступність і семантичність веб-сторінки, дозволяючи браузерам і асистивним технологіям легше розпізнавати навігаційні області.

Атрибути

Специфічні атрибути

Тег <nav> не має специфічних атрибутів.

Глобальні атрибути

• id — унікальний ідентифікатор для елемента. Наприклад:

<nav id="main-navigation">
	<!-- Контент навігації -->
</nav>

• class — задає класи для застосування стилів через CSS. Наприклад:

<nav class="site-navigation">
	<!-- Контент навігації -->
</nav>

• style — дозволяє застосувати інлайн-стилізацію до елемента. Наприклад:

<nav style="background-color: #333; color: white;">
	<!-- Контент навігації -->
</nav>

• title — текстовий опис для елемента, який може відображатися при наведенні курсора. Наприклад:

<nav title="Головне меню">
	<!-- Контент навігації -->
</nav>

Приклад використання

<nav>
    <ul>
        <li><a href="/home">Головна</a></li>
        <li><a href="/about">Про нас</a></li>
        <li><a href="/services">Послуги</a></li>
        <li><a href="/contact">Контакти</a></li>
    </ul>
</nav>

Додаткові момент

• Використовуйте <nav> лише для блоків з навігаційними посиланнями. Якщо список посилань виконує іншу функцію (наприклад, перелік джерел або статей), краще використовувати <ul> без обгортання в <nav>.
• Головне меню сайту повинно бути обгорнуте в один <nav>, щоб підкреслити його значення для пошукових систем і асистивних технологій.
• Посилання в <nav> мають значну вагу для пошукових систем, тому розміщуйте в цьому блоці важливі посилання на основні розділи сайту.
• Забезпечте адаптивність навігації за допомогою CSS (наприклад, стилі для мобільних пристроїв із використанням медіазапитів).