Poznaj Programowanie

Tagi HTML: nav

Piotr Grochal 7 min. czytania

Element <nav> to kluczowy znacznik semantyczny HTML5, który służy do oznaczania sekcji z głównymi linkami nawigacyjnymi (np. menu, spis treści, paginacja).

Dzięki <nav> poprawiasz dostępność, SEO oraz zrozumiałość struktury dla przeglądarek, czytników ekranu i robotów wyszukiwarek.

Czym jest element <nav> i dlaczego jest ważny?

Tag <nav> (skrót od „navigation”) należy do grupy sectioning content w HTML5, co oznacza, że tworzy kontekst strukturalny podobnie jak <header> czy <section>.

Reprezentuje on wyodrębnioną sekcję z linkami prowadzącymi do kluczowych obszarów witryny lub do ważnych zasobów zewnętrznych.

Informuje technologie asystujące, że zawartość wewnątrz to istotna nawigacja, ułatwiając orientację osobom korzystającym z czytników ekranu.

Nie nadużywaj tego znacznika. Stosuj <nav> przede wszystkim do głównej nawigacji (np. menu w nagłówku czy paginacja). Linki pomocnicze w stopce (regulamin, polityka prywatności) lub pojedyncze odnośniki kontaktowe nie wymagają tego tagu.

Specyfikacja techniczna elementu <nav>

Poniżej zebrano najważniejsze właściwości zgodne ze standardem HTML5:

Cecha Opis
Modele treści treść ogólna, treść wyczuwalna, element podziału na sekcje
Elementy nadrzędne elementy treści ogólnej, np. <body>, <header>, <section>
Elementy potomne elementy treści ogólnej, np. <ul>, <a>, <div>
Znaczniki otwierający i zamykający obowiązkowe: <nav>...</nav>
Interfejs DOM HTMLElement

Wsparcie przeglądarek: powszechne we wszystkich nowoczesnych silnikach.

Kiedy używać <nav> – praktyczne przykłady

Stosuj <nav>, gdy linki tworzą podstawowy szkielet nawigacji witryny:

  • główne menu – najczęstsze zastosowanie, zwykle w <header> i obejmujące linki do kluczowych sekcji serwisu;
  • spis treści – w długich artykułach, aby ułatwić szybkie przechodzenie do sekcji;
  • menu boczne – np. lista kategorii będących podstawowymi punktami wejścia do treści;
  • paginacja – nawigacja po stronach listy wpisów lub produktów (poprzedni/następny, numery stron);
  • nawigacja wewnątrz artykułu – kotwice do kluczowych fragmentów treści.

Nie używaj <nav> w następujących sytuacjach:

  • pełna stopka – zbiory linków o charakterze pomocniczym (regulamin, polityka prywatności) nie są główną nawigacją;
  • pojedynczy odnośnik – np. sam link „Kontakt” bez kontekstu nawigacyjnego nie wymaga <nav>;
  • ikony social mediów – zestawy linków do profili społecznościowych nie stanowią podstawowej nawigacji.

Przykład 1 – podstawowe menu w nagłówku

Poniżej prosty przykład z listą <ul> – to najczęstszy wzorzec dla nawigacji:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład nawigacji</title>
<style>
nav ul { list-style: none; padding: 0; margin: 0; display: flex; }
nav li { margin-right: 20px; }
nav a { text-decoration: none; color: #333; }
nav a:hover { color: #007bff; }
</style>
</head>
<body>
<header>
<h1>Moja Strona</h1>
<nav aria-label="Główna nawigacja">
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="/o-nas">O nas</a></li>
<li><a href="/uslugi">Usługi</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
</header>

<main>
<p>Treść strony...</p>
</main>
</body>
</html>

Atrybut aria-label pomaga czytnikom ekranu zidentyfikować rolę oraz zakres danej nawigacji.

Przykład 2 – nawigacja w artykule z paginacją

Na jednej stronie możesz mieć wiele elementów <nav>, o ile każdy ma jednoznaczny opis:

<article>
<h1>Długi artykuł</h1>

<nav aria-label="Spis treści">
<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>

<!-- Treść artykułu -->

<nav aria-label="Paginacja">
<ul>
<li><a href="/poprzedni">← Poprzedni</a></li>
<li><a href="/nastepny">Następny →</a></li>
</ul>
</nav>
</article>

Oddzielne etykiety ARIA pozwalają szybko przeskakiwać pomiędzy różnymi obszarami nawigacji.

Przykład 3 – proste menu boczne z CSS

Tak wystylizujesz pionowe menu boczne z czytelnymi stanami hover:

nav {
background-color: #f8f9fa;
padding: 1rem;
border-right: 1px solid #dee2e6;
width: 200px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
margin-bottom: 0.5rem;
}
nav ul li a {
color: #495057;
text-decoration: none;
display: block;
padding: 0.25rem 0;
}
nav ul li a:hover {
color: #007bff;
text-decoration: underline;
}
nav ul li:last-child a {
border-bottom: none;
}

Przykładowa struktura HTML dla takiego menu:

<nav aria-label="Menu boczne">
<ul>
<li><a href="/kategoria1">Kategoria 1</a></li>
<li><a href="/kategoria2">Kategoria 2</a></li>
<li><a href="/kategoria3">Kategoria 3</a></li>
</ul>
</nav>

Efekt to lekkie, czytelne i responsywne menu, które łatwo rozbudujesz o kolejne poziomy.

Dostępność i dobre praktyki

Zadbaj o poniższe aspekty, by nawigacja była przyjazna i przewidywalna:

  • aria-label – dodawaj opis, np. aria-label="Główna nawigacja", aby ułatwić nawigację użytkownikom czytników ekranu;
  • rola ARIA – nie używaj role="navigation", bo jest już implikowana przez <nav>;
  • co najmniej 3 linki – wskazane dla sensu semantycznego, choć nie jest to wymóg formalny;
  • teksty alternatywne – jeśli w nawigacji jest logo jako obraz, dodaj właściwy alt (np. alt="Logo serwisu");
  • responsywność – używaj CSS Flexbox/Grid i przetestuj działanie na urządzeniach mobilnych (np. menu hamburgerowe);
  • zachowanie przy rozwijaniu – dla podmenu stosuj aria-expanded i aria-controls, a nie role="menu" w klasycznej nawigacji stron.

Różnice względem innych elementów

Oto krótkie porównanie najczęściej mylonych elementów:

Element Zastosowanie Semantyka nawigacyjna?
<nav> główna nawigacja (menu, spis treści, paginacja) Tak
<header> nagłówek strony/sekcji; może zawierać logo i <nav> Nie
<ul> lista pozycji (np. linków) bez dodatkowej semantyki nawigacyjnej Nie

Najczęstsze błędy i pułapki

Unikaj tych problemów, by zachować poprawną semantykę i użyteczność:

  • nadużywanie – nie oznaczaj wszystkich grup linków jako <nav>, bo osłabia to semantykę serwisu;
  • błędy składni – pamiętaj o obowiązkowym zamknięciu <nav>, aby uniknąć błędów HTML;
  • brak stylizacji – <nav> nie zapewnia wyglądu, więc połącz go z odpowiednim CSS i ewentualnym JS;
  • ignorowanie mobile – testuj na ekranach dotykowych i używaj media queries dla płynnej responsywności.