W3docs
de
Anmelden

HTML <nav>-Tag

Das HTML <nav>-Tag definiert einen Navigationsbereich mit Links innerhalb des Dokuments oder zu anderen Dokumenten. Jetzt lernen.

Das <nav>-Tag ist eines der HTML5-Elemente. Es definiert einen Abschnitt mit Navigationslinks — entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten. Typische Navigationsbereiche sind das Hauptmenü einer Website, ein Inhaltsverzeichnis, ein Breadcrumb-Pfad oder ein Index. Die Auszeichnung mit <nav> verbessert sowohl die Struktur als auch die Semantik des Dokuments und hilft Browsern, Screenreadern und Suchmaschinen, die Seite zu verstehen.

nav tag Beispiel

Ein HTML-Dokument kann mehrere <nav>-Elemente enthalten — zum Beispiel eines für die seitenweite Navigation und eines für die seiteninternen (In-Page-)Links.

Wann <nav> verwendet werden sollte (und wann nicht)

<nav> ist für wichtige Blöcke von Navigationslinks gedacht, nicht für jede Gruppe von Links auf der Seite. Reservieren Sie es für die primären, klar erkennbaren Navigationsbereiche, die ein Benutzer suchen würde.

Sie müssen nicht jede Linkliste in ein <nav> einwickeln:

  • Utility-Links im Footer (Datenschutzrichtlinie, Nutzungsbedingungen, Copyright) sind oft eine Ermessensfrage. Eine kurze Sammlung rechtlicher/Utility-Links kann einfach im <footer>-Element leben, ohne ein zusätzliches <nav>. Verwenden Sie <nav> im Footer nur für ein echtes sekundäres Menü.
  • Paginierung (vorherige/nächste Seite, Seitenzahlen) ist ebenfalls eine Ermessensfrage — es ist Navigation, daher ist ein <nav> akzeptabel, aber ein kleiner „nächster Artikel"-Link benötigt keinen.
  • Links im Inhalt innerhalb eines Absatzes oder Artikeltexts gehören nicht in ein <nav>.

Eine gute Faustregel: Wenn das Entfernen des Blocks es schwerer machen würde, auf der Website oder im Dokument zu navigieren, ist es wahrscheinlich ein <nav>. Das <nav>-Element steht üblicherweise neben den Elementen <header>, <main> und <aside>, die eine HTML5-Seite strukturieren.

Gefahr

Das <nav>-Tag kann nicht in das <address>-Element eingebettet werden.

Barrierefreiheit: der Navigations-Landmark

Ein <nav>-Element stellt assistiven Technologien automatisch einen navigation-Landmark bereit, sodass Screenreader-Nutzer direkt dorthin springen können. Aus diesem Grund sollten Sie role="navigation" nicht selbst hinzufügen — das Element impliziert es bereits.

Wenn eine Seite mehr als ein <nav>-Element enthält, geben Sie jedem einen eindeutigen barrierefreien Namen, damit Benutzer sie unterscheiden können. Verwenden Sie aria-label (für ein kurzes, direktes Label) oder aria-labelledby (um auf eine sichtbare Überschrift zu verweisen):

<!-- Primary site navigation -->
<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Breadcrumb navigation on the same page -->
<nav aria-label="Breadcrumb">
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <span aria-current="page">Laptops</span>
</nav>

Fügen Sie das Wort „Navigation" nicht in das Label ein (z. B. aria-label="Main navigation") — assistive Technologien kündigen es bereits als Navigations-Landmark an, sodass es doppelt vorgelesen würde. Verwenden Sie aria-current="page", um den Link für die aktuelle Seite zu markieren.

Syntax

Das <nav>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<nav>) und dem schließenden (</nav>) Tag geschrieben.

Beispiel für die Verwendung des HTML-<nav>-Tags:

Beispiel des HTML-nav-Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | 
      <a href="/learn-css.html">CSS</a> | 
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php.html">PHP</a>
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>
Probier es selbst »

Beispiel des <nav>-Tags:

Beispiel des HTML-nav-Tags

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        display: flex;
        flex-wrap: wrap;
      }
      nav a {
        text-decoration: none;
        display: block;
        padding: 15px 25px;
        text-align: center;
        background-color: rgb(189, 185, 185);
        color: #464141;
        margin: 0;
        font-family: sans-serif;
      }
      nav a:hover {
        background-color: #777777;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>Example of the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <a href="/">Home</a>
      <a href="/quiz">Quizzes</a>
      <a href="/snippets">Snippets</a>
      <a href="/tools">Tools</a>
      <a href="/string-functions">String Functions</a>
    </nav>
  </body>
</html>
Probier es selbst »

Beispiel für die Erstellung eines Dropdown-Menüs mit dem HTML-<nav>-Tag:

Das folgende Beispiel erstellt ein Dropdown-Menü mit reinem CSS, indem ein verschachteltes <ul> bei :hover angezeigt wird.

Warnung

Dieses rein CSS-basierte Dropdown dient zur Veranschaulichung der <nav>-Struktur, nicht als produktionsreifer Code. Da die Untermenüs nur bei Maus-:hover geöffnet werden, sind sie für Tastaturbenutzer und die meisten Screenreader-Nutzer nicht erreichbar, was gegen WCAG verstößt. Ein echtes Dropdown muss auch auf Tastaturfokus (:focus-within) reagieren und seinen Zustand mit Attributen wie aria-expanded und aria-haspopup kennzeichnen — in der Regel mit etwas JavaScript.

Beispiel des nav-Tags beim Erstellen eines Dropdown-Menüs

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav ul ul {
        display: none;
      }
      nav ul li:hover > ul {
        display: block;
      }
      nav ul:after {
        content: "";
        clear: both;
        display: block;
      }
      nav ul li {
        float: left;
        position: relative;
        list-style-type: none;
      }
      nav ul li:hover {
        background: rgba(19, 20, 123, 0.67);
      }
      nav ul li:hover a {
        color: #fff;
      }
      nav ul li a {
        display: block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
        background-color: rgba(35, 17, 134, 0.8);
        font-family: sans-serif;
      }
      nav ul ul {
        background: #5f6975;
        padding: 0;
        position: absolute;
        top: 100%;
      }
      nav ul ul li {
        float: none;
        position: relative;
      }
      nav ul ul li a {
        padding: 15px 10px;
        color: #ffffff;
        text-transform: uppercase;
      }
      nav ul ul li a:hover {
        background: rgba(19, 20, 123, 0.67);
      }
    </style>
  </head>
  <body>
    <h1>Dropdown menu with the HTML nav tag:</h1>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/quiz">Quizzes</a>
          <ul>
            <li>
              <a href="/quiz/html-basic">HTML Basics</a>
            </li>
            <li>
              <a href="/quiz/css-basic">CSS Basics</a>
            </li>
            <li>
              <a href="/quiz/javascript-basic">JavaScript Basics</a>
            </li>
            <li>
              <a href="/quiz/php-basic">PHP Basics</a>
            </li>
            <li>
              <a href="/quiz/es6-basic">ES6 Basics</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/snippets">Snippets</a>
          <ul>
            <li>
              <a href="/snippets/angularjs">Angular JS</a>
            </li>
            <li>
              <a href="/snippets/apache">Apache</a>
            </li>
            <li>
              <a href="/snippets/git">Git</a>
            </li>
            <li>
              <a href="/snippets/linux">Linux</a>
            </li>
            <li>
              <a href="/snippets/nodejs">Node.Js</a>
            </li>
            <li>
              <a href="/snippets/symfony">Symfony</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/tools">Tools</a>
          <ul>
            <li>
              <a href="/tools/html-encoder">HTML ENCODER/DECODER</a>
            </li>
            <li>
              <a href="/tools/css-maker">CSS MAKER</a>
            </li>
            <li>
              <a href="/tools/password-generator">PASSWORD GENERATOR</a>
            </li>
            <li>
              <a href="/tools/image-base64">Base 64</a>
            </li>
            <li>
              <a href="/tools/code-diff">CODE DIFF</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/string-functions">String Functions</a>
          <ul>
            <li>
              <a href="/tools/string-reverse">STRING REVERSE</a>
            </li>
            <li>
              <a href="/tools/string-word-count">STRING WORD COUNT</a>
            </li>
            <li>
              <a href="/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>
Probier es selbst »

Attribute

Das <nav>-Tag unterstützt die globalen Attribute und die Ereignisattribute. Beachten Sie, dass globale Attribute für alle HTML-Elemente gelten.

Wie man ein HTML-<nav>-Tag gestaltet

<nav> ist ein semantischer Container ohne eigenes Standardaussehen, daher erfolgt die Gestaltung mit CSS. Ein gängiges Muster ist, der Leiste einen Hintergrund zu geben und die Links horizontal anzuordnen, wobei die standardmäßige Link-Unterstreichung entfernt und Abstände zwischen ihnen gesetzt werden:

nav {
  background-color: #333;
  padding: 10px;
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}

Um die Links in einer Reihe anzuordnen, ist Flexbox (display: flex auf dem <nav>) der moderne Ansatz, wie im zweiten Beispiel oben gezeigt.

Übungen

Übung
Was ist der Zweck und die Verwendung des nav-Tags in HTML?
Was ist der Zweck und die Verwendung des nav-Tags in HTML?
Was this page helpful?