HTML/Elemente/h1

Das h1-Element stellt eine Überschrift (engl. heading) 1. Ordnung dar und markiert das eine Hauptthema der Seite – analog zum Titel eines Buchkapitels.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

WAI‑ARIA‑Rolle

heading (Details)

Elternelemente

Darf vorkommen in:

allen Elementen, die fließenden Inhalt erlauben (flow content expected)

erlaubte Inhalte

Text
Elemente mit phrasing content

Beispiel

<body>
  <h1>Seitenüberschrift</h1>
  <p> ...</p>
</body>

Erstes Kindelement im body ist eine h1-Überschrift.

Beachten Sie: Eine h1 strukturiert den sichtbaren Inhalt für Leser und Screenreader,
ein title identifiziert die Seite außerhalb des eigentlichen Inhalts (Kontext: "welcher Tab ist das?", "welches Suchergebnis?")

Empfehlung: Es ist eine Konvention nur eine h1 pro Seite zu verwenden

Hätte man mehrere h1, wäre unklar, welche davon "die" Überschrift der Seite ist, und die Baumstruktur (h1 → h2 → h3 …) würde durchbrochen.
Screenreader-Nutzer navigieren häufig per Überschriften-Liste durch eine Seite (z. B. mit der Taste "H" im JAWS/NVDA-Screenreader). Sie erwarten, dass die h1 sofort verrät, worum es auf der Seite geht. Mehrere h1 machen diese Navigation verwirrend, weil nicht klar ist, welche die "Hauptüberschrift" ist.
Verwende die verschiedenen Überschriften nicht, um unterschiedliche Schriftgrößen zu erzielen. Verwende stattdessen CSS: font-size.

Siehe auch

Seitenstrukturierung
- Absätze
- Überschriften
- header, footer & nav
- main
- article, section & aside
Überschriften interessant gestalten
Basis-Tutorial zu …
- Text und Farbe
  - Füllungen und Konturen
  - Schatten und 3D-Effekte
- Text-Dekoration