Używanie list w <nav> do strukturyzowania linków

Używanie list w <nav> do strukturyzowania linków

Kiedy tworzysz menu nawigacyjne w HTML, najczęściej umieszczasz je w znaczniku <nav>. Jednak sam <nav> nie wystarczy. Aby nawigacja była czytelna, semantyczna i dostępna, powinieneś używać dodatkowo list – zazwyczaj <ul> (lista nieuporządkowana).

Stosowanie list w nawigacji to najlepsza praktyka w HTML, ponieważ:

• grupuje logicznie linki w jednej strukturze,
• poprawia dostępność (czytniki ekranu rozpoznają listy),
• umożliwia łatwe stylowanie za pomocą CSS,
• zachowuje zgodność ze standardami sieciowymi (W3C).

1. Podstawowy przykład menu z listą

<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>

Efekt działania:

Każdy <li> reprezentuje jeden element menu. Wewnątrz niego znajduje się link <a>, który prowadzi do odpowiedniej sekcji lub podstrony.

2. Dlaczego nie używać tylko linków bez list?

Porównajmy dwa podejścia:

❌ Zły przykład (brak listy):

<nav>
  <a href="index.html">Strona główna</a>
  <a href="o-nas.html">O nas</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

W tym przypadku:

• brakuje logicznego pogrupowania elementów,
• czytniki ekranu mogą nie odczytać menu jako listy,
• trudniej jest stylować CSS (np. rozdzielić elementy, dodać marginesy).

✅ Dobry przykład (z listą):

<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>

To podejście jest bardziej przejrzyste, uniwersalne i zgodne z zasadami dobrego kodowania.

3. Listy zagnieżdżone – menu rozwijane

Jeśli chcesz dodać submenu (np. podstrony w dziale „O nas”), możesz zagnieździć listy:

<nav>
  <ul>
    <li><a href="index.html">Strona główna</a></li>
    <li>
      <a href="o-nas.html">O nas</a>
      <ul>
        <li><a href="zespol.html">Zespół</a></li>
        <li><a href="misja.html">Misja i wartości</a></li>
      </ul>
    </li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

Taką strukturę można stylizować jako rozwijane menu za pomocą CSS lub JavaScript.

✅ Podsumowanie

• Menu w tagu <nav> powinno być tworzone z użyciem listy <ul>.
• Każdy element menu umieszczamy w <li>, a w nim link <a>.
• Takie podejście poprawia dostępność, semantykę i stylizację menu.
• Można tworzyć także listy zagnieżdżone dla submenu.

🎯 Ćwiczenie w JSFiddle

Wejdź na JSFiddle i wklej poniższy kod w sekcji HTML, aby przetestować własne menu z listą:

<nav>
  <ul>
    <li><a href="#start">Start</a></li>
    <li>
      <a href="#oferta">Oferta</a>
      <ul>
        <li><a href="#web">Strony WWW</a></li>
        <li><a href="#seo">Pozycjonowanie</a></li>
      </ul>
    </li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>