Tagi nawigacyjne

2.1 Linki kotwiczące

Nawigacja wewnątrz strony HTML pomaga użytkownikom szybko przechodzić do różnych sekcji dokumentu. Jest to szczególnie przydatne na długich stronach z dużą ilością treści. W HTML istnieje kilka sposobów realizacji takiej nawigacji, w tym użycie linków kotwiczących, atrybutu id oraz nawigacji za pomocą JavaScript.

Linki kotwiczące to najczęściej stosowany sposób nawigacji wewnątrz strony. Pozwalają one użytkownikom przechodzić do określonych części dokumentu za pomocą tagów kotwiczących.

Przykład użycia:

Tworzenie kotwic za pomocą atrybutu id:

    
      <h2 id="section1">Sekcja 1</h2>
      <p>Treść sekcji 1...</p>
      <h2 id="section2">Sekcja 2</h2>
      <p>Treść sekcji 2...</p>
      <h2 id="section3">Sekcja 3</h2>
      <p>Treść sekcji 3...</p>
    
  

Tworzenie linków do kotwic:

    
      <nav>
        <ul>
          <li><a href="#section1">Przejdź do Sekcji 1</a></li>
          <li><a href="#section2">Przejdź do Sekcji 2</a></li>
          <li><a href="#section3">Przejdź do Sekcji 3</a></li>
        </ul>
      </nav>
    
  

Nawigacja z wykorzystaniem atrybutu name

Atrybut name można również użyć do tworzenia kotwic, chociaż jego użycie jest mniej popularne i uznawane za przestarzałe.

Przykład

    
      <a name="top"></a>
      <p>Góra strony...</p>
      <a name="bottom"></a>
      <p>Dół strony...</p>
      <nav>
        <ul>
          <li><a href="#top">Przejdź na Górę</a></li>
          <li><a href="#bottom">Przejdź na Dół</a></li>
        </ul>
      </nav>
    
  

2.2 Przewijanie z użyciem JavaScript

JavaScript oferuje bardziej elastyczne możliwości nawigacji wewnątrz strony. Dzięki metodom scrollIntoView, scrollTo i innym można zrealizować płynne przewijanie do różnych elementów strony.

Przykład użycia:

Ten kod płynnie przewija stronę do wskazanego elementu po naciśnięciu przycisku.

    
      <button onclick="scrollToSection('section1')">Przejdź do Sekcji 1</button>
      <button onclick="scrollToSection('section2')">Przejdź do Sekcji 2</button>
      <button onclick="scrollToSection('section3')">Przejdź do Sekcji 3</button>

      <h2 id="section1">Sekcja 1</h2>
      <p>Treść sekcji 1...</p>
      <h2 id="section2">Sekcja 2</h2>
      <p>Treść sekcji 2...</p>
      <h2 id="section3">Sekcja 3</h2>
      <p>Treść sekcji 3...</p>
    
  

    
     // Funkcja do płynnego przewijania do określonej sekcji na stronie
      function scrollToSection(sectionId) {
        // Znajdujemy element po jego ID
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Tag <nav>

Tag <nav> w HTML5 jest przeznaczony do definiowania sekcji strony zawierającej linki nawigacyjne. Ten tag pomaga semantycznie wyróżnić bloki nawigacyjne, co poprawia strukturę strony internetowej i czyni ją bardziej dostępną zarówno dla użytkowników, jak i dla wyszukiwarek.

Tag <nav> jest używany do grupowania linków, które służą do nawigacji po stronie lub wewnątrz bieżącego dokumentu. Mogą to być menu główne, menu podrzędne, breadcrumbs, listy stron i inne elementy nawigacyjne.

Składnia

    
      <nav>
        <!-- Elementy nawigacyjne -->
      </nav>
    
  

Przykład użycia

    
      <header>
        <h1>Moja strona</h1>
        <nav>
          <ul>
            <li><a href="#home">Strona główna</a></li>
            <li><a href="#about">O nas</a></li>
            <li><a href="#services">Usługi</a></li>
            <li><a href="#contact">Kontakt</a></li>
          </ul>
        </nav>
      </header>
    
  

Wyjaśnienie

• Tag <header>: używany do stworzenia nagłówka strony, który zawiera menu nawigacyjne
• Tag <nav>: zawiera listę linków prowadzących do różnych sekcji strony
• Tagi <ul> i <li>: używane do tworzenia listy linków nawigacyjnych
• Tag <a>: definiuje same linki, po których użytkownicy mogą przechodzić do innych części strony lub serwisu

2.4 Zastosowanie tagu <nav>

Tag <nav> jest używany do grupowania linków nawigacyjnych, takich jak:

• Główne menu strony
• Menu podrzędne
• Breadcrumbs (ścieżki nawigacyjne)
• Linki do stron paginacji
• Inne linki nawigacyjne

Główne menu strony

    
      <nav>
        <ul>
          <li><a href="#home">Strona główna</a></li>
          <li><a href="#about">O nas</a></li>
          <li><a href="#services">Usługi</a></li>
          <li><a href="#contact">Kontakt</a></li>
        </ul>
      </nav>
    
  

Menu podrzędne

    
      <nav>
        <ul>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#support">Wsparcie</a></li>
          <li><a href="#privacy">Polityka prywatności</a></li>
        </ul>
      </nav>
    
  

Breadcrumbs (ścieżki nawigacyjne)

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Strona główna</a></li>
          <li><a href="/category">Kategoria</a></li>
          <li>Bieżąca strona</li>
        </ol>
      </nav>
    
  

Zalety użycia tagu <nav>

Semantyczne oznaczenie

Użycie tagu <nav> pomaga wyszukiwarkom i technologiom dla osób z ograniczeniami lepiej zrozumieć strukturę strony. To sprawia, że strona jest bardziej dostępna i poprawia jej SEO.

Poprawa struktury strony

Tag <nav> jasno oddziela elementy nawigacyjne od głównej treści, co sprawia, że struktura strony jest bardziej logiczna i uporządkowana.

Łatwość stylizacji

Elementy nawigacyjne umieszczone w tagu <nav> łatwo się stylizuje za pomocą CSS, co poprawia wygląd i użyteczność strony.