Mit dem <hr> Tag lassen sich horizontale Linien darstellen. Auch das <hr> Tag kannst du mit CSS noch etwas schöner machen. Wenn du eine klassische Horizontale Linie zeichnen möchtest. Gibst du einfach in deinen HTML Code ein <hr> Tag ein. Dieses Tag musst du nicht beenden denn es steht für sich alleine und bezeichnet keinen Bereich.

Beispiel: Einfache Linie

1
<hr />

Ergebnis


Mit etwas CSS kannst du die Linie noch etwas schöner gestalten.

1
<hr style="color: black; height: 20px;" />

Ergebnis

Das Ergebnis ist eine Rosa Linie mit einer höhe von 5 Pixel wie im CSS Code


Grundlegende Einstellungen

Wenn du kein eigenen CSS Element zu deiner Horizontalen Linie hinzufügst zeigen die Browser Standard mäßig diese Attribute an

1
2
3
4
5
6
7
8
9
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

Mit horizontalen Linien lassen sich in HTML wunderbar Abschnitte oder Trennzeichen erstellen. Du kannst somit dem Leser einfacher zeigen das hier ein gewisser Abschnitt zu Ende ist und einer neuer beginnt. Auch mit CSS lassen sich strong><hr> Tag Tags bearbeiten und verändern.



html  html-horizontale-linie