HR-Linien im Webdesign

von Sven Lennartz | Veröffentlicht am 29.08.2008 | Letzte Änderung am 4.11.2008. Rubriken: Designideen, HTML, Webdesign | 7 Kommentare

Was ist denn eigentlich ein <hr />? Es handelt sich um einen uralten HTML-Tag, der schon in der Frühzeit des Webs vorkam. <hr /> oder <hr> (ohne Endtag) steht für horizontal rule und macht genau das. Ein schlichte waagerechte Linie wird erzeugt. Sie dient dazu Inhaltsbereiche voneinander abzugrenzen. Das wird gern in Richtung Footer gemacht, macht aber anderweitig Sinn, zum Beispiel um längere Fließtexte zu gliedern oder Blogpostings voneinander anzugrenzen.

Semantisch in Ordnung, ist der Standard optisch nicht sonderlich ansprechend, HTML kennt nur align, noshade, width and size. Deshalb greift der Designer mindestens zu CSS um die Teiler aufzuhübschen oder ersetzt sie komplett durch eine Grafik. Das ist zulässig, da dem <hr /> keine tiefere Bedeutung zukommt. Mancher hölt ihn gar für komplett überflüssig. Ein DIV-Container mit einem Rahmen bietet schon deutlich mehr Möglichkeiten, aber erst Grafiken eröffnen die ganze Palette der Gestaltung.

Beispiele

Die Beispiele zeigen, hier besteht Handlungsbedarf. Das Web braucht bessere <hr>-Linien. Vignetten und Ornamente spielen eine Rolle, auch Unregelmässiges und Handschriftliches kommen vor. Die Möglichkeiten werden aber kaum ausgenutzt.

Eine riesige Kollektion vielseitiger <hr>-Grafiken gibt es beim Smashing Magazine. Der Clou, alle dürfen frei im Web eingesetzt werden. Die Sammlung entstand durch einen Contest extra zu diesem Zweck.

Über Sven Lennartz

Sven ist der Erfinder und Leiter des Dr. Web Magazins. Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Autor früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH. Website. Weitere Beiträge für Dr. Web: 1226

7 Kommentare zu “HR-Linien im Webdesign”

Webdesign Saarland schreibt am 17.03.2009 um 22:44:
Toller Artikel, der jedermann aufzeigen sollte, was man doch alles mit diesem "langweiligen" -Tag machen kann. Ich hoffe das in den zukünftigen (X)HTML-Verionen mehr auf diesen Tag eingegangen wird und zusätzlich Attribute und Parameter eingeführt werden.
Jan schreibt am 21.03.2009 um 18:40:
Toller Artikel, aber wo ist denn der CSS-Code dafür?!

mfG:

Jan
Sven Lennartz schreibt am 22.03.2009 um 08:46:
CSS braucht man hier nicht. Es ist HTML + Grafik.
Jan schreibt am 22.03.2009 um 19:21:
und wie wäre denn der Code?

So oder wie
Sven Lennartz schreibt am 22.03.2009 um 19:36:
der code steht doch im artikel. schon in der erste zeile, jan.
Jan schreibt am 22.03.2009 um 19:55:
ja das weiss ich doch, aber wie kann ich es machen, das also hr die grafik kommt....
andi schreibt am 5.04.2009 um 14:51:
Beispiel:

hr {
background-image: url(Bild.gif);
}