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.
Sven Lennartz
Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.
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.
Toller Artikel, aber wo ist denn der CSS-Code dafür?!
mfG:
Jan
CSS braucht man hier nicht. Es ist HTML + Grafik.
und wie wäre denn der Code?
So oder wie
der code steht doch im artikel. schon in der erste zeile, jan.
ja das weiss ich doch, aber wie kann ich es machen, das also hr die grafik kommt….
Beispiel:
hr {
background-image: url(Bild.gif);
}