HTML Überschriften (engl.: HTML Headings) sind wichtige Strukturelemente einer Webseite. Sie helfen, den Inhalt zu gliedern und ermöglichen es Lesern und Suchmaschinen, die Hierarchie und Organisation der Informationen zu verstehen. In HTML gibt es sechs verschiedene Ebenen für Überschriften, von h1 bis h6.
Syntax und Verwendung
Die Syntax für HTML Überschriften ist einfach. Man verwendet das entsprechende h-Element mit einer Zahl von 1 bis 6:
<h1>Dies ist die wichtigste Überschrift</h1>
<h2>Dies ist eine Überschrift zweiter Ordnung</h2>
<h3>Dies ist eine Überschrift dritter Ordnung</h3>
<h4>Dies ist eine Überschrift vierter Ordnung</h4>
<h5>Dies ist eine Überschrift fünfter Ordnung</h5>
<h6>Dies ist die kleinste Überschrift</h6>Hierarchie und Bedeutung
Die Zahlen in den h-Elementen repräsentieren die Wichtigkeit und Hierarchie der Überschriften:
- h1: Hauptüberschrift der Seite
- h2: Wichtige Abschnittsüberschriften
- h3-h6: Untergeordnete Überschriften mit abnehmender Wichtigkeit
Es ist wichtig, die Hierarchie korrekt zu verwenden. Man sollte nicht Ebenen überspringen (z. B. von h1 direkt zu h3 gehen) und jede Seite sollte nur eine h1-Überschrift haben.
Beispiel einer korrekten Hierarchie:
<h1>Mein Reiseblog</h1>
<h2>Reise nach Paris</h2>
<h3>Sehenswürdigkeiten</h3>
<h4>Eiffelturm</h4>
<h4>Louvre</h4>
<h3>Kulinarische Erlebnisse</h3>
<h2>Reise nach Rom</h2>
<h3>Historische Stätten</h3>
<h3>Italienische Küche</h3>Styling von Überschriften
Standardmäßig werden Überschriften vom Browser mit unterschiedlichen Schriftgrößen dargestellt. Man kann das Aussehen jedoch mit CSS anpassen:
h1 {
font-size: 2.5em;
color: #333;
}
h2 {
font-size: 2em;
color: #666;
}
h3 {
font-size: 1.5em;
color: #999;
}Barrierefreiheit und SEO
Korrekt verwendete Überschriften verbessern die Barrierefreiheit einer Webseite. Screenreader-Nutzer können anhand der Überschriften durch den Inhalt navigieren. Auch für Suchmaschinen sind Überschriften wichtig, da sie die Struktur und den Inhalt einer Seite verdeutlichen.
Häufig gestellte Fragen
Wie viele h1-Überschriften sollte eine Seite haben?
Eine Webseite sollte in der Regel nur eine h1-Überschrift haben. Diese repräsentiert das Hauptthema der Seite.
Darf man Überschriftenebenen überspringen?
Es ist best practice, keine Ebenen zu überspringen. Man sollte die Überschriften in der richtigen Reihenfolge verwenden (h1, dann h2, dann h3 usw.).
Wie wirken sich Überschriften auf SEO aus?
Überschriften sind ein wichtiger Faktor für SEO. Sie helfen Suchmaschinen, den Inhalt und die Struktur einer Seite zu verstehen. Besonders h1 und h2 Überschriften haben einen starken Einfluss.
Kann man das Aussehen von Überschriften anpassen?
Ja, das Aussehen von Überschriften kann mit CSS angepasst werden. Man kann Schriftgröße, Farbe, Abstände und andere Eigenschaften nach Belieben gestalten.
Sollten HTML Überschriften kurz oder lang sein?
HTML Überschriften sollten möglichst prägnant und aussagekräftig sein. Sie sollten das Thema des folgenden Abschnitts klar zusammenfassen, ohne zu lang zu werden. In der Regel sind 5–7 Wörter eine gute Richtlinie.