HTML hr: Themenwechsel, Separator

HTML hr Tag

HTML hr erzeugt eine horizontale Linie als Signal, dass hier das Thema wechselt. Der Textfluss wird unterbrochen, denn das hr-Tag erzeugt einen Zeilenumbruch. Dabei ist der Bruch des Themas zu unbedeutend für einen eigenen section- oder article-Bereich mitsamt header und Überschrift.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

hr Element – Darstellung

Die Browser stellen <hr> mit 100% Breite, 2 Pixel Höhe als schwarze Linie und einem leichten 3D-Effekt dar. Der Dokumentenfluss wird unterbrochen, denn das <hr>-Tag erzeugt einen Zeilenumbruch. Der Linie folgt erneut ein Zeilenumbruch und der Dokumentenfluss wird wieder aufgenommen.


Die hr-Linie wirkt einen Hauch eingedrückt, ist schlicht und grau und läuft ohne spezielles CSS über die gesamte Breite der umfassenden Box. Der exakte Abstand zwischen dem Text oder den Bildern von der Linie hängt vom jeweiligen Browser ab oder wird vom CSS gesteuert.


<p>Bevor CSS ins Rampenlicht trat, haben wir das hr-Tag auch tatsächlich zur Trennung von Inhalten eingesetzt.</p>
<hr>
<h2>Semantische HTML-Elemente</h2>
<p>Das hr-Tag lässt sich mit CSS gestalten.</p>

HTML hr ist leer (void) und muss nicht durch einen Schrägstrich geschlossen werden.

Während ein HTML br-Tag innerhalb eines Absatzes einen Zeilenbruch erzeugt, steht ein hr-Tag für einen thematischen Wechsel auf Absatzebene. Eine hr zwischen section- oder article-Bereichen macht wenig Sinn, denn diese Element signalisieren bereits ein neues Kapitel / eine Änderung der Szene.

CSS für hr-Tags

hr { background: red; height: 2px; border: none }

oder 

hr { border: 2px solid cyan" }

// hr mit background-image
hr { background-image:url('star.png'); height: 19px; border:none; }

Alles über Bären

Alles über Löwen und Tiger

oder


oder


/* Glyph, by Harry Roberts */
hr.chap {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.chap:after {
    content: "Kapitel";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

Mehr Stile für hr, gesammelt bei miguel.marques.ramos auf GitHub

Attribute für hr

Die alten HTML-Attribute für hr – size, width, noshade, align – gibt es nicht mehr. Der leichte 3d-Effekt des hr-Tags wird durch CSS eliminiert.