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.
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,alignundnoshadesollten 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%;">
9 Kommentare
Vielen Dank
Manchmal will man auf seinem Blog nur kleine Dinge einbauen – wie z.B. einen Querstrich für die Übersichtlichkeit.
Danke für diesen (auch für Laien ) einfachen und umsetzbaren Tipp.
Super, ich bin zwar mittlerweile ziemlich fit in html aber den code für einen einfachen Querstrich war mir bisher nicht bekannt. So einfach und doch effektiv.
Hey Sven, super dass du diese tollen Tipps für Websitedesign und SEO gibst.
Hat mir sehr geholfen.
LG aus Berlin,
Alex
Herzlichen Dank, genau das hatte ich gesucht!
Vielen Dank! Kurz und knapp auf den Punkt gebracht bei fixer Internetsuche. Beste Grüße!
Sehr gut – auf die Schnelle habe ich in meinen Büchern tatsächlich nichts über den Querstrich gefunden.
Danke sehr Hilfreich.
So einfach… Dankeschön! 🙂