Mit HTML eine horizontale Linie (Trennlinie) erzeugen

Zuletzt aktualisiert: 17. Juli 2021

Um zwei Sektionen optisch voneinander abzutrennen, könnte sich z.B. eine Trennlinie gut eignen. Deshalb erfährst du hier, wie du ganz einfach mit HTML eine horizontale Linie erzeugen kannst.

Inhaltsverzeichnis Verbergen
1) So machst du in HTML eine horizontale Linie
1.1) Beispiel:
2) Das Aussehen der horizontalen Linie ändern
2.1) Farbe ändern
2.1.1) Beispiel 1:
2.1.2) Beispiel 2:
2.2) Höhe ändern
2.2.1) Beispiel 1:
2.2.2) Beispiel 2:
2.3) Breite ändern
2.3.1) Beispiel 1:
2.3.2) Beispiel 2:

So machst du in HTML eine horizontale Linie

Für die Trennlinie benötigst du in HTML lediglich folgendes HTML-Element: <hr>
Das „hr“ steht dabei für „horizontal ruler“. Das <hr> kann im Grunde überall im <body> eingebaut werden und benötigt kein schließendes Element.

Beispiel:

Dies ist ein Text oberhalb der Trennlinie

Der Text unterhalb

<p>Dies ist ein Text oberhalb der Trennlinie</p>
<hr>
<p>Der Text unterhalb</p>

Das Aussehen der horizontalen Linie ändern

Natürlich kann das Aussehen der HTML horizontalen Linie per CSS geändert werden. Dazu verwenden wir, wie bei jedem anderen HTML-Element auch, das style-Attribut, um den CSS-Code zu definieren.

Die HTML-Attribute size, color, width, align und noshade sollten nicht mehr verwendet werden, weil sie veraltet sind und nicht mehr in HTML5 unterstützt werden. Stattdessen sollte das Aussehen per CSS definiert werden.

Farbe ändern

Die Farbe der Linie kann mit der CSS-Anweisung border-color geändert werden

Beispiel 1:

<hr style="border-color: green;">

Beispiel 2:

<hr style="border-color: #ff0000;">

Höhe ändern

Die Höhe der Linie kann mit der CSS-Anweisung border-width geändert werden

Beispiel 1:

<hr style="border-width: 5px;">

Beispiel 2:

<hr style="border-width: 20px;">

Breite ändern

Die Breite der Linie kann mit der CSS-Anweisung width geändert werden.

Beispiel 1:

<hr style="width: 50px;">

Beispiel 2:

<hr style="border-width: 80%;">

6 Kommentare

Kommentar hinzufügen