Navigations-Tags

2.1 Anker-Links

Die Navigation innerhalb einer HTML-Seite hilft den Nutzern, schnell zu verschiedenen Abschnitten des Dokuments zu springen. Das ist besonders nützlich bei langen Seiten mit viel Inhalt. Es gibt mehrere Möglichkeiten, solche Navigation in HTML umzusetzen, unter anderem die Verwendung von Anker-Links, dem Attribut id und der Navigation mit JavaScript.

Anker-Links sind die am häufigsten verwendete Methode zur Navigation innerhalb einer Seite. Sie ermöglichen Nutzern, mit Hilfe von Anker-Tags zu bestimmten Teilen des Dokuments zu springen.

Beispiel für die Verwendung:

Erstellen von Ankern mit dem Attribut id:

    
      <h2 id="section1">Section 1</h2>
      <p>Content of section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Content of section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Content of section 3...</p>
    
  

Erstellen von Links zu Ankern:

    
      <nav>
        <ul>
          <li><a href="#section1">Go to Section 1</a></li>
          <li><a href="#section2">Go to Section 2</a></li>
          <li><a href="#section3">Go to Section 3</a></li>
        </ul>
      </nav>
    
  

Navigation mit dem Attribut name

Das Attribut name kann auch zur Erstellung von Ankern verwendet werden, obwohl seine Verwendung seltener ist und es als veraltet gilt.

Beispiel

    
      <a name="top"></a>
      <p>Top of the page...</p>
      <a name="bottom"></a>
      <p>Bottom of the page...</p>
      <nav>
        <ul>
          <li><a href="#top">Go to Top</a></li>
          <li><a href="#bottom">Go to Bottom</a></li>
        </ul>
      </nav>
    
  

2.2 Scrollen mit JavaScript

JavaScript bietet flexiblere Möglichkeiten für die Navigation innerhalb der Seite. Mit Methoden wie scrollIntoView, scrollTo und anderen kannst du ein sanftes Scrollen zu verschiedenen Elementen der Seite umsetzen.

Anwendungsbeispiel:

Dieser Code scrollt sanft die Seite zu einem angegebenen Element, wenn die Schaltfläche gedrückt wird.

    
      <button onclick="scrollToSection('section1')">Go to Section 1</button>
      <button onclick="scrollToSection('section2')">Go to Section 2</button>
      <button onclick="scrollToSection('section3')">Go to Section 3</button>

      <h2 id="section1">Section 1</h2>
      <p>Content of section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Content of section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Content of section 3...</p>
    
  

    
     // Funktion zum sanften Scrollen zu einem bestimmten Abschnitt auf der Seite
      function scrollToSection(sectionId) {
        // Element anhand seiner ID finden
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Tag <nav>

Das Tag <nav> in HTML5 ist dazu gedacht, einen Bereich der Seite zu definieren, der Navigationslinks enthält. Dieses Tag hilft, Navigationsblöcke semantisch zu kennzeichnen, was die Struktur der Webseite verbessert und sie sowohl für Nutzer als auch für Suchmaschinen besser zugänglich macht.

Das Tag <nav> wird verwendet, um Links zu gruppieren, die zur Navigation auf der Website oder innerhalb des aktuellen Dokuments dienen. Dies können Hauptmenüs, Untermenüs, Brotkrumen, Seitenlisten und andere Navigationselemente sein.

Syntax

    
      <nav>
        <!-- Navigationselemente -->
      </nav>
    
  

Anwendungsbeispiel

    
      <header>
        <h1>Meine Website</h1>
        <nav>
          <ul>
            <li><a href="#home">Startseite</a></li>
            <li><a href="#about">Über uns</a></li>
            <li><a href="#services">Dienstleistungen</a></li>
            <li><a href="#contact">Kontakt</a></li>
          </ul>
        </nav>
      </header>
    
  

Erklärung

• Tag <header>: wird verwendet, um einen Header der Seite zu erstellen, der ein Navigationsmenü enthält
• Tag <nav>: enthält eine Liste von Links, die zu verschiedenen Abschnitten der Seite führen
• Tag <ul> und <li>: werden verwendet, um eine Liste von Navigationslinks zu erstellen
• Tag <a>: definiert die Links selbst, mit denen Nutzer zu anderen Teilen der Seite oder der Website navigieren können

2.4 Verwendung des Tags <nav>

Das Tag <nav> wird zum Gruppieren von Navigationslinks verwendet, wie zum Beispiel:

• Hauptmenü der Website
• Untermenüs
• Breadcrumbs
• Links zu Paginierungsseiten
• Andere Navigationslinks

Hauptmenü der Website

    
      <nav>
        <ul>
          <li><a href="#home">Startseite</a></li>
          <li><a href="#about">Über uns</a></li>
          <li><a href="#services">Dienstleistungen</a></li>
          <li><a href="#contact">Kontakt</a></li>
        </ul>
      </nav>
    
  

Untermenü

    
      <nav>
        <ul>
          <li><a href="#faq">Häufig gestellte Fragen</a></li>
          <li><a href="#support">Unterstützung</a></li>
          <li><a href="#privacy">Datenschutzerklärung</a></li>
        </ul>
      </nav>
    
  

Brotkrumen (breadcrumbs)

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Startseite</a></li>
          <li><a href="/category">Kategorie</a></li>
          <li>Aktuelle Seite</li>
        </ol>
      </nav>
    
  

Vorteile der Verwendung des Tags <nav>

Semantische Auszeichnung

Die Verwendung des Tags <nav> hilft Suchmaschinen und Technologien für Menschen mit eingeschränkten Möglichkeiten, die Struktur der Seite besser zu verstehen. Dadurch wird die Website zugänglicher und verbessert ihr SEO.

Verbesserung der Seitenstruktur

Das Tag <nav> trennt Navigations-Elemente klar vom Hauptinhalt, wodurch die Auszeichnung der Seite logischer und strukturierter wird.

Einfache Stilgestaltung

Navigationselemente, die im Tag <nav> eingeschlossen sind, lassen sich leicht mit CSS gestalten, um das Aussehen und die Benutzerfreundlichkeit zu verbessern.