HTML-Tags: Strukturierung des Dokuments

HTML5 kennt eine Reihe von semantischen Struktur-Tags, die definieren, welche Rolle ein Bereich auf der Seite spielt — nicht wie er aussieht, sondern was er bedeutet.

Die Grundidee: saubere Trennung von Inhalt & Struktur (HTML) und Darstellung (CSS).

Diese Tags helfen dem Browser, Suchmaschinen und assistiven Technologien (z.B. Screenreadern), die Seite zu verstehen.

Übersicht der Struktur-Tags

Im Folgenden eine Übersicht der wichtigsten Tags — und wie sie im Markup eingesetzt werden:

<body>

  <header>
    <!-- Kopfbereich: Logo, Navigation, Suchfeld -->
    <h1>Seitentitel</h1>
    <nav>Home | About | Kontakt</nav>
  </header>

  <main>
    <section>
      <!-- in sich abgeschlossener Inhaltsbereich -->
      <h2>Abschnittstitel</h2>
    </section>

    <article>
      <!-- eigenständiger Inhalt, z.B. ein Blogeintrag -->
    </article>

    <aside>
      <!-- Randinformation, nachrangiger Inhalt -->
    </aside>
  </main>

  <footer>
    <!-- Fußbereich: Impressum, Social Media, Adresse -->
    <address>Musterstraße 1, 12345 Musterstadt</address>
  </footer>

</body>

Referenz aller Struktur-Tags

<header>
Inhaltlicher Kopfbereich — z.B. für Titelbild, Navigation, Suchfeld
<footer>
Inhaltlicher Fußbereich — z.B. Links zu Impressum, Social Media
<main>
Hauptinhalt der Seite — nur einmal pro Dokument
<section>
In sich abgeschlossener, eigenständiger Inhaltsbereich
<article>
Eigenständiger Inhalt mit sich wiederholender Struktur (z.B. Blogeintrag, Nachricht)
<nav>
Navigationsbereich
<aside>
In sich abgeschlossener Bereich mit nachrangigem Inhalt (z.B. Sidebar, Werbung)
<address>
Bereich, der Kontaktdaten beinhaltet
<h1> … <h6>
Überschriften Ebene 1–6. <h1> sollte nur einmal pro Seite vorkommen.
<hgroup>
Gruppierung von Überschrift und Untertitel