FigmaOpenCode

Heading

Synonyme: Überschrift, Seitentitel
Ähnliche Komponenten: Title, Preline, Subline

Kurzbeschreibung

Eine Heading strukturiert und beschreibt Inhaltsabschnitte, um Nutzenden und assistiven Technologien eine schnelle Orientierung zu ermöglichen.

Beispiele

Varianten

Code anzeigen

<h1 class="kern-heading-display">Heading-display</h1>
<h2 class="kern-heading-x-large">Heading-x-large</h2>
<h3 class="kern-heading-large">Heading-large</h3>
<h4 class="kern-heading-medium">Heading-medium</h4>
<h5 class="kern-heading-small">Heading-small</h5>

Beschreibung

Headings gliedern Seiten und Abschnitte klar und nachvollziehbar. Sie fassen die Inhalte der übertitelten Textabschnitte knapp und verständlich zusammen. Headings sind Teil der semantischen Dokumentenstruktur. Die korrekte semantische Auszeichnung wie <h1> bis <h6> sorgt dafür, dass Inhalte strukturiert erfasst, schnell gefunden und barrierefrei gelesen werden können.

Verwendungsregeln

Kennzeichne Überschriften immer mit den passenden HTML-Tags wie <h1>, <h2> usw., um die semantische Struktur deiner Seite sicherzustellen. Verwende zusätzlich eine passende CSS-Klasse – z. B. <h1 class="kern-heading-large"> – um die Überschriften visuell einheitlich zu gestalten. Nutze Headings als Überschriften für die Seite und alle ihre Abschnitte.

Übersicht: Rolle und Verwendung von Überschriftenelementen

Rolle	Verwendung
Title-Tag	Definiert den Seitentitel im Browser-Tab und in den Suchmaschinenergebnissen. Er ist nicht auf der Seite sichtbar, aber essenziell für SEO und die Orientierung im Browser. Der Title-Tag sollte für jede Unterseite konsistent aufgebaut sein. Typischerweise wird ein Title-Tag aus folgenden Teilen zusammengesetzt: Titel der aktuellen Unterseite – Name des Online-Dienstes (gleichbleibend). Beispiel: Persönliche Angaben – Name des Online-Dienstes
H1	Erste sichtbare Überschrift (Hauptüberschrift) auf der Seite. Sollte pro Seite nur einmal verwendet werden. Sie beschreibt präzise den Inhalt der Seite und hilft sowohl Nutzenden als auch Suchmaschinen bei der Einordnung.
H2	Mit H2 strukturierst du die Inhalte einer Seite. Jede Hauptüberschrift eines Abschnitts sollte als H2 ausgezeichnet werden.
H3 und H4	Unterüberschriften innerhalb eines H2-Abschnitts werden mit H3 ausgezeichnet. Falls ein H3-Abschnitt weiter untergliedert werden muss, verwende dafür H4.

Anwendung der visuellen und semantischen Hierarchie

Wähle die visuelle Größe abhängig von der Anzahl der Hierarchieebenen auf deiner Seite. So bleibt die visuelle Gliederung auch bei komplexeren Seiten klar und gut lesbar.

Seiten mit bis zu drei Ebenen

Semantische Ebene	Visuelle Größe
Ebene 1 <h1>	Heading-large
Ebene 2 <h2>	Heading-medium
Ebene 3 <h3>	Heading-small

Seiten mit vier und mehr Ebenen

Semantische Ebene	Visuelle Größe
Ebene 1 <h1>	Heading-x-large
Ebene 2 <h2>	Heading-large
Ebene 3 <h3>	Heading-medium
Ebene 4 <h4>	Heading-small

infoHinweis

In besonderen Fällen kann es sinnvoll sein, von der üblichen visuellen Hierarchie abzuweichen – z. B. bei der Alert-Komponente. Stelle in solchen Fällen sicher, dass die Seite weiterhin barrierefrei bleibt – insbesondere für Screenreader-Nutzende.

Display-Überschrift

Heading-Display ist eine besonders groß gesetzte Überschrift, die ausschließlich für herausgehobene, gestalterisch dominante Aussagen eingesetzt werden sollte. Sie eignet sich nicht zur Strukturierung von Inhalten, sondern wirkt als aufmerksamkeitsstarkes Element zur Einleitung oder visuellen Rahmung.

Verwende diese Komponente nur in Ausnahmefällen, z. B.:

• als starker Einstiegssatz auf einer Landingpage
• als persönliche Begrüßung auf einer Startseite
• zur emotionalen Rahmung eines besonderen Bereichs

Da visuelle Struktur auch immer semantische Bedeutung hat, sollte Heading-display mit <h1> ausgezeichnet werden.

Achtung!

Prüfe bei jedem Einsatz sorgfältig, wie sich die Darstellung auf kleinen Geräten verhält.

Dos und Don’ts

Jede Seite hat nur eine H1.

Nutze niemals händische Textformatierungen – wie Fettungen und Schriftgrößen – um Überschriften für die Inhalte zu erzeugen. Diese werden weder von Suchmaschinen noch von Screenreadern als Überschriften erkannt.

Halte Dich an die hierarchische Reihenfolge der Headings: vor einer H2 darf keine H3 oder H4 stehen.

Schreibe Überschriften mit regulärer Groß- und Kleinschreibung – nicht in Versalien.

Weitere Hinweise

• Halte Überschriften kurz.
• Nutze Headings zur inhaltlichen Strukturierung deiner Inhalte.
• Prüfe, ob umfangreiche Seiten besser in mehrere Seiten aufgeteilt werden sollten.
• Vermeide händisch eingefügte Absatzumbrüche in Headings.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis. Achte bei der Nutzung auf: Beachte zusätzlich:

• Headings müssen als native HTML-Tags (<h1>, <h2> etc.) ausgezeichnet werden – nicht rein über CSS-Klassen.
• Nur eine sichtbare <h1> pro Seite.
• Keine Ebenen überspringen – z. B. nicht von H2 direkt zu H4.

Siehe auch: BFIT Handreichungen