HTML-Kurs / Überschriften und Absätze: h1 bis h6, p und br
Verwenden Sie h1 bis h6 für HTML-Überschriften und p für Absätze. Die Überschriften beschreiben die Hierarchie einer Seite, während die Absätze zusammenhängende Sätze gruppieren. Verwenden Sie br nur, wenn Sie einen Zeilenumbruch innerhalb desselben Absatzes benötigen und nicht, um einen neuen Absatz zu beginnen.
Verwenden Sie h1–h6, um die Überschriftenebenen zu zeigen
HTML bietet sechs Überschriftenebenen. Eine Seite verwendet üblicherweise h1 für ihre Hauptüberschrift, h2 für die Hauptabschnitte und h3 für die Themen innerhalb dieser Abschnitte. Die Ebene einer Überschrift beschreibt, wo sich ihr Inhalt im Dokument befindet; es handelt sich nicht um eine Wahl der Schriftgröße. Vergleichen Sie die Bereiche der Seite mit den Überschriften in Teilen Sie eine Seite mit semantischen Elementen.
<h1>Barrierefreiheitsleitfaden</h1>
<h2>HTML-Struktur</h2>
<p>Überblick über die Struktur eines HTML-Dokuments.</p>
<h3>Überschriftenebenen</h3>
<p>Wie man Überschriften organisiert.</p>
<h3>Absätze</h3>
<p>Wie man Absätze trennt.</p>
<h2>CSS-Darstellung</h2>
<p>Wie CSS das Aussehen von Überschriften und Absätzen verändert.</p>Die beiden oben genannten Überschriften h3 sind Themen innerhalb des h2 Abschnitts mit dem Titel „HTML-Struktur“. Die nächste h2 beginnt einen weiteren Hauptabschnitt. Beim Einführen eines Unterabschnitts sollten Sie vermeiden, eine Ebene zu überspringen — zum Beispiel direkt von h2 zu h4 zu wechseln.
Klare Überschriften helfen den Lesern, die Seite zu überfliegen, und Bildschirmlesernutzern, zwischen den Abschnitten zu navigieren. Der W3C WAI-Leitfaden zur Überschriftenstruktur erklärt, warum Überschriftenebenen die Organisation des Inhalts widerspiegeln sollten.
Wenn WordPress den Titel des Beitrags bereits als h1 der Seite anzeigt, benötigen Sie keinen weiteren h1 für denselben Titel im Beitragsinhalt. Beginnen Sie stattdessen die Hauptabschnitte mit h2.
Sehen Sie sich die Überschriften und Absätze in einem Browser an
Speichern Sie das folgende vollständige Beispiel als index.html und öffnen Sie es in einem Browser. Es zeigt die sechs Überschriftenebenen nacheinander zum Vergleich; eine echte Seite benötigt nur die Ebenen, die ihr Inhalt erfordert.
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML-Überschriften und -Absätze</title>
</head>
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
<p>Dies ist der erste Absatz.</p>
<p>Dies ist der zweite Absatz.</p>
</body>
</html>Browser geben den Überschriftenebenen unterschiedliche Standardgrößen und -abstände, aber das genaue Aussehen hängt vom Browser und vom CSS der Seite ab. Wenn eine Überschrift größer oder kleiner erscheinen soll, ändern Sie ihr CSS, anstatt die falsche Überschriftenebene zu verwenden.
Trennen Sie Absätze mit p
Das Element p kennzeichnet einen Absatz. Wickeln Sie verschiedene Gruppen zusammenhängender Sätze in separate p-Elemente ein, damit ihre Beziehung klar bleibt.
<p>HTML erstellt die Struktur einer Webseite.</p>
<p>CSS steuert ihr Aussehen.</p>Dieser Code erstellt zwei Absätze. Das Hinzufügen einer Leerzeile in einem Texteditor allein erstellt keinen neuen HTML-Absatz. Ein p kann normalen Text und Inline-Inhalte wie Links enthalten, darf jedoch keine Überschriften, Listen oder Tabellen enthalten.
Um Platz zwischen den Absätzen hinzuzufügen, verwenden Sie eine CSS-Eigenschaft wie margin, anstatt leere p-Elemente oder wiederholte br-Elemente einzufügen.
Verwenden Sie br für einen Zeilenumbruch innerhalb eines Absatzes.
Das Element br beginnt eine neue Zeile, ohne einen neuen Absatz zu erstellen. Es ist nützlich, wenn die Position eines Zeilenumbruchs wichtig ist, wie bei einer Adresse oder einem Gedicht. Wenn das Thema wechselt, beginnen Sie stattdessen ein anderes p.
In diesem Beispiel ist das zweite p ein neuer Absatz. Das br ändert nur die Zeile innerhalb dieses Absatzes.
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML-Absätze und Zeilenumbrüche</title>
</head>
<body>
<p>Dies ist der erste Absatz.</p>
<p>Dies ist die erste Zeile des zweiten Absatzes.<br>Dies ist die zweite Zeile des zweiten Absatzes.</p>
</body>
</html>Behalten Sie die semantische Überschriftenebene im HTML bei und legen Sie deren visuelle Größe mithilfe von Schriftarten, Größen und Zeilenhöhen in CSS fest.
Übung: Korrigieren einer Überschriftenhierarchie
Wenn ein Hauptabschnitt seine erste Untersektion erhält, wechseln Sie nicht von h2 zu h4. Das Problem in diesem Codeausschnitt ist seine Hierarchie, nicht die Schriftgröße.
<!-- Eine Überschriftsebene übersprungen -->
<h2>Lieferinformationen</h2>
<h4>Lieferbereiche</h4>
<!-- Eine konsistente Hierarchie -->
<h2>Lieferinformationen</h2>
<h3>Lieferbereiche</h3>
<h3>Lieferzeiten</h3>Vergleichen Sie die Codeausschnitte separat innerhalb eines body eines Dokuments; behalten Sie nicht beide als tatsächlichen Inhalt. Lesen Sie nur die Überschriften und prüfen Sie, ob das Hauptthema und seine Unterthemen klar bleiben. Verwenden Sie CSS, um ihr Erscheinungsbild anzupassen.
Überprüfen Sie Ihre Überschriften und Absätze
- Wählen Sie
h1–h6je nach Inhaltsstruktur, nicht nach der Standard-Schriftgröße. - Geben Sie jeder Überschrift einen beschreibenden Namen und vermeiden Sie es, eine Ebene zu überspringen, wenn Sie zu einem Unterabschnitt wechseln.
- Verwenden Sie ein neues
pfür einen neuen Absatz; verwenden Siebrnur für einen signifikanten Zeilenumbruch in einem Absatz. - Steuern Sie Schriftgrößen und Abstände mit CSS, nicht mit leeren Elementen oder einer anderen Überschriftenebene.
Um falsch verschachtelte Tags zu überprüfen, reichen Sie Ihr HTML beim Markup-Validierungsdienst des W3C ein. Testen Sie die Lesereihenfolge und die Tastaturnutzung mit der kleinen Seite in Grundlagen der Barrierefreiheit: Überschriften, Links, Bilder und Tastatur.
