DevPanicZone Logo DevPanicZone! Cheatsheets.

HTML Navigation

Die Navigation führt Besucher durch deine Website. Lerne, wie du mit dem <nav>-Element und Listen semantisch korrekte Menüs erstellst.

Was ist eine Navigation?

Die Navigation ist das Menü deiner Website - sie zeigt Besuchern, welche Seiten es gibt und wie sie dorthin kommen. Eine gute Navigation ist:

  • Klar: Besucher finden sofort, was sie suchen
  • Konsistent: Auf jeder Seite an der gleichen Stelle
  • Semantisch: Für Browser und Screenreader verständlich
Warum semantische Navigation?

Das <nav>-Element sagt dem Browser: "Hier ist ein Navigationsbereich." Das hilft:

  • Screenreadern: Blinde Nutzer können direkt zur Navigation springen
  • Suchmaschinen: Google versteht die Struktur deiner Website besser
  • Entwicklern: Der Code ist selbsterklärend

Die Grundstruktur einer Navigation

Eine HTML-Navigation besteht aus drei Elementen:

Element Bedeutung
<nav> Container für den Navigationsbereich
<ul> Ungeordnete Liste für die Menüpunkte
<li> Einzelner Listenpunkt (Menüeintrag)
<a> Link zur jeweiligen Seite

Minimales Beispiel

HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">Über uns</a></li>
        <li><a href="/contact.html">Kontakt</a></li>
    </ul>
</nav>

So sieht das aus (mit etwas CSS):

Open CSS
css 
/* Einfache Demo-Navigation */
.nav-demo-simple {
    background: var(--bg-tertiary);
    border-radius: 0 8px 8px 0;
    padding: 1rem;
    border-left: 4px solid var(--accent-blue);
}

.nav-demo-simple ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-demo-simple a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.nav-demo-simple a:hover {
    background: var(--accent-blue-hover);
}
Warum eine Liste?

Du könntest Links auch direkt nebeneinander schreiben - aber eine Liste ist semantisch korrekt. Screenreader sagen dann z.B. "Navigation, Liste mit 3 Einträgen" - das hilft Nutzern enorm!

Die häufigste Platzierung ist im <header> - so ist das Menü auf jeder Seite sichtbar:

HTML 
<header>
    <div class="logo">MeineLogo</div>
    
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/produkte.html">Produkte</a></li>
            <li><a href="/about.html">Über uns</a></li>
            <li><a href="/contact.html">Kontakt</a></li>
        </ul>
    </nav>
</header>

Typische Header-Struktur

Ein vollständiger Header enthält meist:

  • Logo: Links, verlinkt zur Startseite
  • Navigation: Rechts oder zentriert
  • Optional: Suchfeld, Login-Button, Sprachwahl

Horizontale vs. Vertikale Navigation

Der HTML-Code ist identisch - nur das CSS unterscheidet sich:

Horizontal (Standard)

Für Header, typisch bei Desktop

Vertikal (Sidebar)

Für Sidebars, Dashboards

CSS macht den Unterschied
  • Horizontal: display: flex; auf dem <ul>
  • Vertikal: Standard (Block-Elemente untereinander)

Aktuelle Seite markieren

Besucher sollten immer sehen, wo sie sich befinden. Dafür gibt es zwei Methoden:

Methode 1: CSS-Klasse

Füge dem aktiven Link eine Klasse hinzu:

HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog.html" class="active">Blog</a></li>
        <li><a href="/contact.html">Kontakt</a></li>
    </ul>
</nav>

Methode 2: ARIA-Attribut (empfohlen)

Semantisch korrekter - Screenreader verstehen es:

HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog.html" aria-current="page">Blog</a></li>
        <li><a href="/contact.html">Kontakt</a></li>
    </ul>
</nav>

Ergebnis:

Best Practice

Nutze beide Methoden zusammen! Das ARIA-Attribut für Accessibility, die Klasse für CSS-Styling:

<a href="/blog.html" class="active" aria-current="page">Blog</a>

Im CSS kannst du dann stylen:

nav a.active,
nav a[aria-current="page"] {
    background: var(--accent);
    color: var(--dark);
}

Mehrere Navigationen auf einer Seite

Eine Website kann mehrere Navigationsbereiche haben - z.B. Hauptmenü und Footer-Links. Nutze aria-label, um sie zu unterscheiden:

HTML 
<!-- Hauptnavigation im Header -->
<nav aria-label="Hauptnavigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/produkte.html">Produkte</a></li>
        <li><a href="/contact.html">Kontakt</a></li>
    </ul>
</nav>

<!-- Footer-Navigation -->
<nav aria-label="Footer-Navigation">
    <ul>
        <li><a href="/impressum.html">Impressum</a></li>
        <li><a href="/datenschutzerklaerung.html">Datenschutz</a></li>
    </ul>
</nav>
Screenreader-Ansage

Ein Screenreader sagt dann: "Hauptnavigation, Liste mit 3 Einträgen" - statt nur "Navigation". Das macht einen großen Unterschied für blinde Nutzer!

Zusammenfassung

HTML 
<!-- Vollständiges Beispiel -->
<header>
    <a href="/" class="logo">MeinLogo</a>
    
    <nav aria-label="Hauptnavigation">
        <ul>
            <li><a href="/" aria-current="page">Home</a></li>
            <li><a href="/produkte.html">Produkte</a></li>
            <li><a href="/about.html">Über uns</a></li>
            <li><a href="/contact.html">Kontakt</a></li>
        </ul>
    </nav>
</header>
Navigation Checkliste
  • <nav> als Container verwenden
  • Links in <ul> / <li> strukturieren
  • aria-label bei mehreren Navigationen
  • Aktuelle Seite mit aria-current="page" markieren
  • Sichtbaren Hover- und Focus-Zustand per CSS

Wie geht es weiter?

Du kennst jetzt die HTML-Grundlagen für Navigationen. In weiteren Tutorials lernst du:

  • Breadcrumbs: Zeige Nutzern den Pfad durch deine Website
  • Dropdown-Menüs: Untermenüs mit CSS und JavaScript
  • Mobile Navigation: Hamburger-Menü für Smartphones
  • Accessibility: Keyboard-Navigation und ARIA im Detail

Mehr aus HTML

Tutorials werden geladen...