CSS, HTML und Javascript mit {stil}

HTML hr • Themenwechsel / Horizontale Linie

Einfache Linie: das HTML HR-Tag

In HTML 4 und XHTML erzeugte hr eine einfache horizontale Linie, die nach außen eine optische Trennung am vorangegangenen Inhalt angedeutet hat. In HTML5 zeigt hr einen Bruch des Themas auf, der aber zu unbedeutend für einen eigenen section- oder article-Bereich mitsamt header und Überschrift ist.

HTML5 befördert also das hr-Tag in die Garde der semantischen Tags.

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 aufarbeiten.</p>

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

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.

CSS für hr-Tags

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

oder 

hr { border: 2px solid cyan"; }
Alles über Bären

Alles über Löwen und Tiger

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