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.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
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);
}