<hr>

<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>

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>

• 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.

• 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.

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

  Outlook stellt hr-Elemente als 3D-Linie dar und ignoriert teilweise CSS-Anpassungen. Für konsistentes Aussehen verwende stattdessen ein gestyltes div mit border-top.

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett