<nav> w HTML to semantyczny element służący do definiowania sekcji nawigacyjnej na stronie internetowej. Jego głównym zadaniem jest wyodrębnienie tych fragmentów kodu, które zawierają najważniejsze odnośniki prowadzące do innych stron lub istotnych sekcji w obrębie tej samej witryny.
Czym dokładnie jest <nav>?
- Element
<nav>odgrywa rolę głównego punktu orientacyjnego (landmark) – informuje, że zawarta w nim treść służy do nawigacji; - Powinno się go wykorzystywać wyłącznie dla kluczowych zestawów linków nawigacyjnych – oznacza to, że nie każdy pojedynczy link lub lista linków zasługuje na umieszczenie w
<nav>. Najczęstsze przypadki zastosowań to główne menu serwisu, menu boczne (sidebar), spis treści artykułu lub ścieżki okruszkowe (breadcrumbs); - Nie powinno się umieszczać wszystkich linków strony w
<nav>– np. odnośniki w stopce (footer) czy linki powiązane w sekcji bocznej, jeśli nie są głównymi środkami nawigacyjnymi.
Znaczenie semantyczne i korzyści
- Poprawa dostępności – czytniki ekranu i inne technologie asystujące mogą łatwiej rozpoznawać i „przeskakiwać” do nawigacji, co ułatwia korzystanie ze strony osobom z niepełnosprawnościami;
- Lepsze SEO – semantyczne oznaczenie pomaga wyszukiwarkom zidentyfikować strukturę strony i priorytetowe ścieżki nawigacyjne, co sprzyja właściwemu indeksowaniu;
- Spójność i czytelność kodu – stosowanie
<nav>sprawia, że kod HTML jest bardziej przejrzysty i łatwiejszy do utrzymania.
Podstawowa składnia
<nav>
<ul>
<li><a href="/index.html">Strona główna</a></li>
<li><a href="/o-nas.html">O nas</a></li>
<li><a href="/kontakt.html">Kontakt</a></li>
</ul>
</nav>
Przykłady zastosowania
Główne menu serwisu
<nav>
<a href="/home">Start</a>
<a href="/services">Usługi</a>
<a href="/about">O nas</a>
<a href="/contact">Kontakt</a>
</nav>
Spis treści w artykule
<article>
<h1>Przykładowy artykuł</h1>
<nav>
<ul>
<li><a href="#wstep">Wstęp</a></li>
<li><a href="#rozdzial1">Rozdział 1</a></li>
<li><a href="#rozdzial2">Rozdział 2</a></li>
</ul>
</nav>
<section id="wstep">...</section>
<section id="rozdzial1">...</section>
<section id="rozdzial2">...</section>
</article>
Nawigacja typu „breadcrumb” (okruszki)
<nav aria-label="breadcrumbs">
<ol>
<li><a href="/">Start</a></li>
<li><a href="/nawigacja">Nawigacja</a></li>
<li>Tag nav</li>
</ol>
</nav>
Dodatkowe wskazówki
- Wielokrotność – możesz używać kilku elementów
<nav>na stronie (np. dla głównej nawigacji oraz do nawigacji kontekstowej w artykule); - Atrybuty –
<nav>obsługuje atrybuty globalne oraz zdarzenia HTML – można do niego przypisywać klasy CSS, identyfikatory czy obsługę zdarzeń JavaScript; - Domyślne stylowanie – przeglądarki wyświetlają
<nav>jako element blokowy (display: block;), podobnie jak np.<div>.
Podsumowanie
Element <nav> w HTML służy do wyróżniania na stronie istotnych sekcji nawigacyjnych, co przekłada się na lepszą dostępność, SEO i organizację kodu. Użycie go zgodnie z przeznaczeniem to standard nowoczesnego, semantycznego HTML.
