Kurs HTML

Lekcja 9.3: Nawigacja (<nav>)

Strona główna > Rozdział 9: Elementy semantyczne > Nawigacja (<nav>)

Oznaczanie głównych bloków nawigacyjnych

Element <nav> jest semantycznym znacznikiem wprowadzonym w HTML5, służącym do oznaczania sekcji strony zawierającej główne linki nawigacyjne. Jego celem jest pomoc przeglądarkom i technologiom wspomagającym (jak czytniki ekranu) w identyfikacji kluczowych mechanizmów nawigacji na stronie.

Kiedy używać <nav>?

Znacznik <nav> powinien być używany do grupowania linków, które stanowią podstawową nawigację strony. Typowe przykłady to:

Kiedy NIE używać <nav>?

Nie każda grupa linków na stronie powinna być opakowana w <nav>. Należy unikać używania go dla:

Nadmierne używanie <nav> może utrudnić nawigację użytkownikom czytników ekranu, którzy często używają tego znacznika do szybkiego przeskakiwania między głównymi sekcjami nawigacyjnymi.

Struktura wewnątrz <nav>

Najczęściej wewnątrz elementu <nav> znajduje się lista nieuporządkowana (<ul>) zawierająca linki (<a>) jako elementy listy (<li>). Jest to powszechna i zalecana praktyka, ponieważ semantycznie reprezentuje listę opcji nawigacyjnych.

Przykład głównego menu w nagłówku:

<header>
  <!-- ... logo, tytuł ... -->
  <nav aria-label="Główna nawigacja"> <!-- Dobrą praktyką jest dodanie aria-label -->
    <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>

Wskazówka dotycząca dostępności: Dodanie atrybutu aria-label do elementu <nav> (np. aria-label="Główna nawigacja", aria-label="Nawigacja w stopce" - jeśli zdecydujesz się jej tam użyć) pomaga użytkownikom czytników ekranu rozróżnić poszczególne bloki nawigacyjne, jeśli na stronie jest ich więcej niż jeden.

Przykład spisu treści w artykule:

<article>
  <h2>Długi artykuł o HTML</h2>
  
  <nav aria-label="Spis treści artykułu">
    <h3>Spis treści</h3>
    <ol>
      <li><a href="#wprowadzenie">Wprowadzenie</a></li>
      <li><a href="#struktura">Struktura dokumentu</a></li>
      <li><a href="#semantyka">Znaczniki semantyczne</a></li>
      <li><a href="#podsumowanie">Podsumowanie</a></li>
    </ol>
  </nav>
  
  <section id="wprowadzenie">
    <h3>Wprowadzenie</h3>
    <p>... treść ...</p>
  </section>
  
  <!-- ... kolejne sekcje ... -->
</article>

W tym przypadku użyto listy uporządkowanej (<ol>), ponieważ kolejność sekcji w spisie treści ma znaczenie.

Wiele elementów <nav> na stronie

Strona może zawierać więcej niż jeden element <nav>, jeśli istnieją różne, ważne bloki nawigacyjne. Na przykład:

W takich przypadkach szczególnie ważne jest użycie aria-label, aby pomóc użytkownikom technologii wspomagających zrozumieć cel każdego bloku <nav>.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: W głównym nagłówku strony (<header>) umieść główną nawigację strony (menu) wewnątrz znacznika <nav>. Użyj listy nieuporządkowanej (<ul>) z co najmniej trzema linkami (<a>) jako elementami listy (<li>). Dodaj atrybut aria-label do znacznika <nav>.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Strona z Nawigacją</title>
    <style>
        header { background-color: #eee; padding: 10px; }
        nav ul { list-style: none; padding: 0; margin: 0; }
        nav li { display: inline-block; margin-right: 15px; }
        nav a { text-decoration: none; color: navy; }
        nav a:hover { color: blue; }
    </style>
</head>
<body>

    <header>
        <h1>Moja Strona</h1>
        <nav aria-label="Główna nawigacja strony">
            <ul>
                <li><a href="/">Start</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <p>Główna treść strony...</p>
    </main>

    <footer>
        <p>© 2025 Moja Strona</p>
        <!-- Linki w stopce - zazwyczaj NIE w <nav> -->
        <a href="/polityka">Polityka Prywatności</a>
    </footer>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

  1. Dodaj drugi blok <nav> na stronie, np. symulujący paginację pod listą artykułów (linki "Poprzednia", "1", "2", "3", "Następna"). Pamiętaj o dodaniu odpowiedniego aria-label.
  2. Wewnątrz głównego menu (<ul>) stwórz zagnieżdżoną listę (<ul> wewnątrz <li>), aby zasymulować rozwijane podmenu.
  3. Przeanalizuj kod źródłowy kilku znanych stron internetowych i zobacz, jak i gdzie używają elementu <nav>.

Najczęściej zadawane pytania

Do czego służy znacznik <nav>?

Znacznik <nav> służy do oznaczania głównych bloków nawigacyjnych na stronie, takich jak główne menu, spis treści czy paginacja. Pomaga to w SEO i dostępności.

Czy każda grupa linków powinna być w <nav>?

Nie. <nav> jest przeznaczony tylko dla głównych bloków nawigacyjnych. Należy unikać używania go dla pomniejszych grup linków, np. w stopce strony.

Jaką strukturę stosuje się wewnątrz <nav>?

Najczęściej wewnątrz <nav> umieszcza się listę nieuporządkowaną (<ul>) z linkami (<a>) jako elementami listy (<li>), co semantycznie reprezentuje listę opcji nawigacyjnych.

Czy na stronie może być więcej niż jeden element <nav>?

Tak, jeśli istnieją różne, ważne bloki nawigacyjne (np. główne menu i paginacja). W takim przypadku zaleca się użycie atrybutu aria-label do ich rozróżnienia.

Dlaczego dodaje się aria-label do <nav>?

Atrybut aria-label dostarcza tekstową etykietę dla elementu, która jest odczytywana przez czytniki ekranu. Pomaga to użytkownikom tych technologii zrozumieć cel danego bloku nawigacyjnego, zwłaszcza gdy jest ich kilka.

← Poprzednia lekcja: Nagłówek i stopka (<header>, <footer>)
Następna lekcja: Główna treść (<main>) →