<hr>

Zuletzt aktualisiert am 3. Februar 2026

Das <hr>-Element erzeugt eine thematische Trennung zwischen Inhaltsabschnitten. Browser stellen es standardmäßig als horizontale Linie dar, aber die eigentliche Bedeutung geht tiefer: Es signalisiert einen Themenwechsel im Text, vergleichbar mit den drei Sternchen (***), die in Büchern einen Szenenwechsel markieren. Auf dieser Seite lernst du, wann <hr> semantisch sinnvoll ist und wann du besser CSS für eine dekorative Linie verwendest.

Grundlagen

<hr> steht für “Horizontal Rule”, ist aber mehr als nur eine Linie. Es trennt thematisch zusammengehörige Abschnitte voneinander, etwa einen Blogpost von den Kommentaren oder verschiedene Themenblöcke in einem Artikel.

• <hr> ist ein Void-Element: Es hat keinen Inhalt und kein schließendes Tag
• Es erzeugt standardmäßig eine horizontale Linie über die volle Breite mit etwas Margin oben und unten
• Die semantische Bedeutung ist eine thematische Trennung: ein Wechsel des Themas oder Kontexts
• Screenreader kündigen <hr> als “Trennlinie” oder “separator” an
• Für rein dekorative Linien (ohne Themenwechsel) verwende CSS border statt <hr>

Syntax

<p>Erster Themenbereich.</p>
<hr>
<p>Zweiter Themenbereich.</p>

Beispiele

Themenwechsel in einem Artikel

Wenn ein Artikel verschiedene Aspekte behandelt, die nicht direkt zusammenhängen, kann <hr> den Übergang markieren:

<h2>Zusammenfassung</h2>
<p>In diesem Tutorial hast du gelernt, wie Flexbox funktioniert.</p>

<hr>

<h2>Weiterführende Ressourcen</h2>
<p>Hier findest du weitere Materialien zum Thema.</p>

Gestylte Trennlinie

Mit CSS kannst du das Aussehen von <hr> komplett anpassen, von der Farbe über die Dicke bis hin zu Mustern:

<p>Abschnitt eins.</p>

<hr style="border: none; border-top: 2px dashed #6366f1; margin: 24px 0;">

<p>Abschnitt zwei.</p>

Barrierefreiheit

• Screenreader-Verhalten: Screenreader kündigen <hr> als “Trennlinie” oder “separator” an. Das hilft Nutzern zu verstehen, dass ein neuer thematischer Abschnitt beginnt.
• ARIA-Rolle: <hr> hat automatisch die Rolle separator. Du musst kein zusätzliches ARIA-Attribut setzen.
• Dekorative Linien ausblenden: Wenn du eine Linie nur als Dekoration verwendest (ohne thematische Trennung), solltest du CSS statt <hr> verwenden oder <hr> mit role="presentation" versehen, damit Screenreader sie ignorieren.

Häufige Fehler

• hr als reine Dekoration: Wenn du nur eine Linie willst, ohne dass ein Themenwechsel stattfindet, verwende CSS border-top auf einem Element. <hr> hat eine semantische Bedeutung, die Screenreader-Nutzern kommuniziert wird.

• hr zwischen jedem Absatz: <hr> nach jedem Absatz zu setzen, ist wie nach jedem Satz einen Szenenwechsel anzukündigen: Es verwirrt mehr als es hilft. Verwende <hr> nur bei echten Themenwechseln.

• hr zum Erzeugen von Abständen: Nutze CSS margin für Abstände, nicht <hr>. Ein <hr> sagt “hier ändert sich das Thema”. Wenn das nicht zutrifft, ist es das falsche Element.

Browser-Kompatibilität

Das hr-Element wird von allen Browsern seit der allerersten HTML-Version unterstützt.

Email-Kompatibilität

Das hr-Element wird in den meisten Email-Clients dargestellt, allerdings variiert das Styling erheblich.

Verwandte Elemente