Der <h1>
bis <h6>
-Tag in HTML: Überschriften strukturieren
Die Tags <h1>
bis <h6>
in HTML werden verwendet, um Überschriften zu definieren. Sie dienen nicht nur der visuellen Darstellung, sondern auch der semantischen Struktur einer Webseite, was für die Barrierefreiheit und Suchmaschinenoptimierung (SEO) entscheidend ist. Die Überschriften reichen von <h1>
(wichtigste Überschrift) bis <h6>
(am wenigsten wichtig).
Grundlegende Syntax der <h1>
bis <h6>
-Tags
Jede Überschriftsebene wird durch ein eigenes Tag definiert.
Beispiel:
<h1>Dies ist eine Hauptüberschrift</h1>
<h2>Dies ist eine Unterüberschrift</h2>
<h3>Dies ist eine kleinere Überschrift</h3>
<h4>Dies ist eine noch kleinere Überschrift</h4>
<h5>Dies ist eine sehr kleine Überschrift</h5>
<h6>Dies ist die kleinste Überschrift</h6>
Darstellung im Browser:
<h1>
: Große, hervorgehobene Überschrift<h2>
: Etwas kleinere Überschrift<h3>
bis<h6>
: Fortlaufend kleinere Überschriften
Einsatzmöglichkeiten der <h1>
bis <h6>
-Tags
- Hierarchische Struktur:
<h1>Website-Titel</h1> <h2>Kapitel 1</h2> <h3>Abschnitt 1.1</h3> <h2>Kapitel 2</h2>
- SEO und Zugänglichkeit:
- Der
<h1>
-Tag sollte nur einmal pro Seite verwendet werden und den Hauptinhalt beschreiben. - Verwenden Sie
<h2>
bis<h6>
für Untergliederungen, um die Struktur klar zu definieren.
- Der
Styling von Überschriften mit CSS
Die Darstellung von Überschriften kann mit CSS angepasst werden.
Beispiel:
<style>
h1 {
font-size: 2.5em;
color: #333;
}
h2 {
font-size: 2em;
color: #555;
}
h3 {
font-size: 1.5em;
color: #777;
}
</style>
<h1>Große Überschrift</h1>
<h2>Mittlere Überschrift</h2>
<h3>Kleinere Überschrift</h3>
Best Practices
- Korrekte Reihenfolge: Überschriften sollten hierarchisch verwendet werden, ohne Ebenen zu überspringen (z. B. keine
<h3>
ohne vorheriges<h2>
). - Einzigartigkeit: Der
<h1>
-Tag sollte einzigartig und beschreibend sein. - Vermeidung von Styling-Zwecken: Verwenden Sie Überschriften nicht rein für die Textgröße. Nutzen Sie CSS, um das Erscheinungsbild anzupassen.
Fazit
Die Tags <h1>
bis <h6>
sind essenziell, um Inhalte auf einer Webseite logisch zu strukturieren. Sie verbessern die Lesbarkeit, erleichtern die Navigation und tragen zur Suchmaschinenoptimierung bei. Durch die Kombination mit CSS können sie optisch ansprechend gestaltet werden, ohne ihre semantische Bedeutung zu verlieren.
Letzte Bearbeitung am Montag, 30. Dezember 2024 – 9:20 Uhr von Alex, Webmaster für Google und Bing SEO.