Trennlinien - HTML <hr> tag - mit CSS gestalten

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:

webgo Webhostingpaket GoPaket Gold - Viel Leistung zum günstigen Preis

Habt ihr noch Fragen, Anregungen oder Kommentare zum Artikel? Bitte Schreiben.

Kommentar schreiben

Kommentare: 15
  • #1

    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

  • #2

    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.

  • #3

    dein vater (Mittwoch, 08 Januar 2020 10:29)

    da steht nicht das was ich brauche ihr dickschädel

  • #4

    deine mutter (Donnerstag, 23 April 2020 14:41)

    ...da steht alles was de brauchst du dickererschädel

  • #5

    wealth (Donnerstag, 24 September 2020 11:56)

    Jo, #2 hat recht.einfach"," durch nen"." austauschen und dann klappt das schon

  • #6

    idk (Samstag, 23 Januar 2021 10:59)

    wie kann ich eine doppellinie erstellen?

  • #7

    iwandel.de (Montag, 08 Februar 2021 11:27)

    mach eine Box, so hab ichs gemacht.

  • #8

    Ich nicht (Mittwoch, 12 Mai 2021 12:16)

    Hi

  • #9

    ihr seid alle unlustig (Freitag, 23 Juli 2021 18:11)

    sas

  • #10

    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...

  • #11

    ggd (Montag, 13 Dezember 2021 15:21)

    chgcgvvcch

  • #12

    awd (Montag, 07 Februar 2022 21:32)

    aw

  • #13

    schnauze (Freitag, 10 Juni 2022 08:34)

    ihn nutzlosen kelbs

  • #14

    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.

  • #15

    BTC (Mittwoch, 26 Oktober 2022 00:18)

    Kauft Bitcoin und haltet die Fressen Ihr Trottel