HTML/Textstrukturierung/hr

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Element hr kennzeichnet einen thematischen Bruch. Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal.

In HTML5 bekommt das hr-Element die Bedeutung eines Themenwechsels auf Absatz-Ebene (paragraph-level thematic break). Sichtbare Trennlinien dienen auch visuell der Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

hr fügt eine Trennlinie ein und erzeugt dabei einen eigenen Absatz. Dabei ist es egal, ob das Element am Ende der Zeile des vorherigen Absatzes steht oder in einer eigenen Zeile (wie im Beispiel) oder am Anfang des folgenden Absatzes.

Beispiel: hr-Elemente in HTML ansehen …
<p>Hier ist ein Abschnitt zu Ende.</p> <hr> <p>Und hier beginnt etwas Neues ohne eigene Überschrift.</p>
Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das hr-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <hr />.
Beachten Sie: Ein hr-Element hat keinen Inhalt. Dies gilt für jede HTML-Variante.

[Bearbeiten] Trennlinien mit CSS gestalten

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Das hr-Element können Sie auch mit CSS gestalten. Das ist strikt HTML-Standard-konform. Wenn Sie nur eine Linie unter einem anderen Element benötigen, können Sie statt einem hr-Element auch dem anderen Element einen oberen (border-top) oder unteren (border-bottom) Rahmen geben. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden.

Beispiel ansehen …
hr { 
    width: 95%; 
    height: 5px; 
    margin: 0 auto;
    color: blue;
    background: #dfac20;
}
<p>Hier ist ein Abschnitt zu Ende.</p>
 
<hr>
 
<p>Hier beginnt etwas Neues ohne eigene Überschrift.</p>
Das hr-Element erhält im Beispiel eine Breite von 95% und eine Höhe von 5 Pixeln.

[Bearbeiten] siehe auch

  • Referenz: hr
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML