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. hr ist leer (void) und muss nicht durch einen Schrägstrich geschlossen werden.
Bevor CSS ins Rampenlicht trat, haben wir das hr-Tag auch tatsächlich zur Trennung von Inhalten eingesetzt.
<hr> <h2>Semantische HTML-Elemente</h2> <p>Das hr-Tag lässt sich mit CSS gestalten.</p>
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;
}
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.
