Trennlinien in HTML

Hier kommt die Maus – nein, eine Trennlinie. Durch diese können Sie Inhalte trennen.

Trennlinien <hr /> sind an und für sich nichts Besonderes. Sie trennen zwei Abschnitte. Der HTML-Befehl <hr /> steht für engl. horizontal ruler = horizontales Lineal.

<p>Text eins</p>
<hr />
<p>Text zwei</p>

Und das kommt dann im Browser wie folgt raus:

Text eins


Text zwei

Der HTML-TAG <hr /> ist XHTML-gerecht. Oft werden Sie noch den "Vorgänger" in Form von <hr> sehen. Mit HTML5 ist diese Schreibweise wieder in Ordnung.

Zu den Trennlinien gab es hier in einer alten Version des Kurses noch Erklärungen zu den damals möglichen Attributen. Diese sind heutzutage nicht mehr notwendig, da das Design über CSS gemacht wird. Wer in der Vergangenheit schwelgen mag, findet den alten Text noch im Archiv.

HTML5 und <hr>

Mit HTML5 hat die Trennlinie eine weitere strukturelle Bedeutung bekommen. Die Trennlinie trennt unterschiedliche Inhalte voneinander. Soweit logisch ... die Trennlinie muss aber dazu nicht unbedingt sichtbar sein. Sprich man kann über CSS und das Design die Trennlinie durchaus unsichtbar „schalten“. Wichtig ist die strukturelle Aussage. So können z.B. problemlos mehrere Themen auf der Startseite, die nichts miteinander zu tun haben, sauber voneinander getrennt werden.