<hr>: Das Thematische Trennelement (Horizontale Linie)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <hr> HTML-Element repräsentiert einen thematischen Bruch zwischen Absatzelementen: zum Beispiel einen Szenenwechsel in einer Geschichte oder ein Themenwechsel innerhalb eines Abschnitts.

Probieren Sie es aus

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

<hr />

<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: #fff;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

Historisch wurde dies als horizontale Linie dargestellt. Während es in visuellen Browsern immer noch als horizontale Linie angezeigt werden kann, wird dieses Element jetzt in semantischen statt presentationalen Begriffen definiert. Wenn Sie eine horizontale Linie zeichnen möchten, sollten Sie dies mit entsprechendem CSS tun.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

align

Bestimmt die Ausrichtung der Linie auf der Seite. Wenn kein Wert angegeben ist, ist der Standardwert left.

color

Setzt die Farbe der Linie durch Farbnamen oder hexadezimalen Wert.

noshade

Bestimmt, dass die Linie keine Schattierung hat.

size

Definiert die Höhe der Linie in Pixeln.

width

Setzt die Länge der Linie auf der Seite durch einen Pixel- oder Prozentwert.

Beispiel

HTML

html
<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>

<hr />

<p>
  This is the second paragraph of text. This is the second paragraph of text.
  This is the second paragraph of text. This is the second paragraph of text.
</p>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt.
Erlaubter Inhalt Keiner; es ist ein void element.
Tag-Auslassung Muss ein Start-Tag haben und darf keinen End-Tag haben.
Erlaubte Eltern
Implizite ARIA-Rolle separator
Erlaubte ARIA-Rollen presentation oder none
DOM-Schnittstelle [`HTMLHRElement`](/de/docs/Web/API/HTMLHRElement)

Spezifikationen

Specification
HTML
# the-hr-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch