Logo
Startseite | PLUS Start | Shop | Mediadaten | Kontakt | Impressum | 4,549 Artikel Merker

HR-Linien im Webdesign


Anzeige

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.

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

Screenshot - Divider

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

GravatarSven 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

Verwandte Artikel

Bookmarken! Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • TwitThis
  • Hype
  • StumbleUpon
  • Facebook
  • Wikio DE
  • YahooMyWeb

7 Kommentare zu “HR-Linien im Webdesign”

  1. Webdesign Saarland schreibt am

    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.

  2. Jan schreibt am

    Toller Artikel, aber wo ist denn der CSS-Code dafür?!

    mfG:

    Jan

  3. Sven Lennartz schreibt am

    CSS braucht man hier nicht. Es ist HTML + Grafik.

  4. Jan schreibt am

    und wie wäre denn der Code?

    So oder wie

  5. Sven Lennartz schreibt am

    der code steht doch im artikel. schon in der erste zeile, jan.

  6. Jan schreibt am

    ja das weiss ich doch, aber wie kann ich es machen, das also hr die grafik kommt....

  7. andi schreibt am

    Beispiel:

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

Meine Meinung

Bitte beachten Sie: Werbung und Spam sind unerwünscht und können eine Rechnung zur Folge haben. Woher kommen die Bilder neben den Kommentaren?