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: 0