HTML hr • Themenwechsel / Horizontale Linie

Einfache Linie oder Strich oder Streifen: das HTML HR-Tag

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.

hr Tag – Darstellung

Die Browser stellen hr-Tags 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 Tags in HTML5</h2>
<p>Das hr-Tag lässt sich mit CSS gestalten.</p>

HTML hr ist leer (void) und muss in HTML5 nicht mehr durch einen Schrägstrich geschlossen werden./p>

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 in HTML5 nicht. Der leichte 3d-Effekt des hr-Tags wird durch CSS eliminiert.