Das HTML <hr> tag dient zur Textstrukturierung und bezeichnet nach HTML5 einen Themenwechsel. Damit bekommt die Trennlinie auch eine semantische Bedeutung.
<hr> erzeugt einen Absatz durch das Einfügen einer horizontalen Trennlinie, deshalb auch die Bezeichnung "horizontal ruler".
Für eine XHTML konforme Schreibweise muß der tag Inhaltsleer notiert werden <hr />.
Ein sauber strukturierter Text ist wichtig, damit sich der Leser gut im Artikel zurechtfindet und lädt zum weiterlesen ein.
Damit steuert auch der <hr> tag seinen Teil zur Nutzerfreundlichkeit einer Webseite bei.
Die Trennlinien sollten im Artikel gezielt beim Wechsel von unterschiedlichen Themen eingesetzt werden.
Trennlinie einfügen HTML
Um eine einfache Trennlinie einzufügen kann der <hr /> tag an jeder beliebigen Stelle im HTML-Code notiert werden. Der Browser generiert eine Linie über die gesamte Breite des Elements und erzeugt einen neuen Absatz <p>.
<hr> Trennlinie mit CSS bearbeiten
Für individuelle Linien sollte der <hr> tag mit CSS Stylesheets gestaltet werden. Die Eingabe der Parameter kann direkt im HTML-Code der Webseite erfolgen oder über separate Dateien geladen werden. Mit div Selektoren können individuelle Horizontale Trennlinien einfach per CSS zugewiesen werden.
Höhe, Breite und Farbe der Trennlinie <hr> gestalten
Mit der Anweisung align wird die Trennlinie ausgerichtet.
Beispiel:
- < hr width="60px" align="left" >
- < hr width="40%" align="center" >
- < hr width="120px" align="right" >
Mit der Anweisung size wird die Stärke der Linie bestimmt:
- < hr width="300px" size="5" >
Im folgenden Beispiel ist die Trennlinie mit den CSS-Eigenschaften Border, Height, Width und Background-Color verändert worden. Die Höhe beträgt 30 Pixel und die Breite 60% der umschließenden Box. Als Hintergrundfarbe wurde Rot gewählt. Border ist auf 0 gesetzt. Ohne die Ausrichtung mit dem Befehl "align" wird die Linie zentriert dargestellt.
Beispiel:
Test einer Trennlinie mit roter Farbe und 30 Pixel Höhe, so sieht es aus:
Test
| CSS-Code | Bemerkung |
|
hr{ border: 0; width: 60%; height: 30px; background-color: red; } |
Der Code kann auch direkt ins HTML geschrieben werden: <hr style="height: 30px; width: 60%; background-color: red; border: 0;" /> Die Farbangaben können natürlich auch im RGB oder HEX Format eingegeben werden. |
Trennlinie <hr> mit Farbverlauf
Mit der CSS Eigenschaft background-image und der Anweisung linear-gradient können hr-Linien mit Farbverlauf gestaltet werden.
Tipp für eine Trennlinie mit 5 Pixeln Höhe und Farbverlauf so sieht es aus:
Tipp
| CSS-Code | Bemerkung |
|
hr{ border: 0; height: 5px; background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0,75), rgba(0,0,0,0)); } |
Der Code kann auch direkt ins HTML geschrieben werden:
<hr style="border: 0; height: 5px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" /> |
Trennlinie mit Hintergrundbild
Auch Bilder können als Trennlinie verwendet werden.
Tipp ein Bild als Trennlinie.
Tipp
| CSS-Code | Bemerkung |
|
hr{ border: 0; width: 80%; height: 5px; background-image: url(bild.png); } |
Der Code kann auch direkt ins HTML geschrieben werden:
<hr style="background-image:url(bild.png);width: 80%;height: 10px; border: 0;"/> |
Einige CSS Eigenschaften für den <hr> tag
- width für die Breite der Linie
- height für die Höhe
- border für Rahmen
- text-align für die Ausrichtung
- background-color für die Farbe
- margin für die Abstände zu anderen Elementen
- noshade zum Abschalten des 3D-Effekts
- background-image
Sondertarif nur für kurze Zeit:
Habt ihr noch Fragen, Anregungen oder Kommentare zum Artikel? Bitte Schreiben.
Kommentar schreiben
asdf movie maker (Montag, 29 Oktober 2018 17:07)
bei mir geht das nicht obwohl ich gecopyt und gepastet habe ich arbeite mit thimble von mozilla
Pat (Samstag, 14 Dezember 2019 10:59)
Bei dem zweiten Beispiel ist ein kleiner Fehler:
rgba(0,0,0,0,75) <- da ist ein kleiner Kommafehler zwischen 0 und 75. Direkt im HTML ist es dann die richtige Version, 0.75.
dein vater (Mittwoch, 08 Januar 2020 10:29)
da steht nicht das was ich brauche ihr dickschädel
deine mutter (Donnerstag, 23 April 2020 14:41)
...da steht alles was de brauchst du dickererschädel
wealth (Donnerstag, 24 September 2020 11:56)
Jo, #2 hat recht.einfach"," durch nen"." austauschen und dann klappt das schon
idk (Samstag, 23 Januar 2021 10:59)
wie kann ich eine doppellinie erstellen?
iwandel.de (Montag, 08 Februar 2021 11:27)
mach eine Box, so hab ichs gemacht.
Ich nicht (Mittwoch, 12 Mai 2021 12:16)
Hi
ihr seid alle unlustig (Freitag, 23 Juli 2021 18:11)
sas
frage (Dienstag, 31 August 2021 10:37)
Wie bekomme ich es hin den Farberlauf nicht von der Mitte nach außen, sondern nach links und rechts mehr werden zu lassen? In der Mitte also komplett transparent erscheinen zu lassen...
ggd (Montag, 13 Dezember 2021 15:21)
chgcgvvcch
awd (Montag, 07 Februar 2022 21:32)
aw
schnauze (Freitag, 10 Juni 2022 08:34)
ihn nutzlosen kelbs
fritz (Dienstag, 30 August 2022 17:30)
Schade, dass wer anscheinend "viel zu wissen glaubt" solche Kommentare schreibt.
Mutig finde ich auch solch eine Seite für Kommentare offen zu betreiben.
Den ehrlichen Frage stellern und Beantwortern sollte vom Betreiber ein Dank ausgesprochen werden.
BTC (Mittwoch, 26 Oktober 2022 00:18)
Kauft Bitcoin und haltet die Fressen Ihr Trottel