<hr>: Das Element für thematische Unterbrechungen (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 stellt eine thematische Unterbrechung zwischen Elemente auf Absatzebene dar: zum Beispiel ein 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: white;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

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

Attribute

Zu den Attributen dieses Elements gehören die globalen Attribute.

align Veraltet Nicht standardisiert: Bestimmt die Ausrichtung der Linie auf der Seite. Wenn kein Wert angegeben ist, ist der Standardwert left.
color Veraltet Nicht standardisiert: Setzt die Farbe der Linie mittels eines Farbnamen oder eines hexadezimalen Werts.
noshade Veraltet Nicht standardisiert: Bestimmt, dass die Linie keinen Schatten haben soll.
size Veraltet Nicht standardisiert: Bestimmt die Höhe der Linie in Pixeln.
width Veraltet Nicht standardisiert: Bestimmt die Länge der Linie auf der Seite in Pixeln oder Prozentwerten.

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ßende Inhalte.
Erlaubter Inhalt	Keiner; es ist ein leeres Element.
Tag-Auslassung	Muss ein Start-Tag haben und darf kein End-Tag haben.
Erlaubte Eltern	Jedes Element, das fließende Inhalte akzeptiert `<select>` Element
Implizierte ARIA-Rolle	`separator`
Erlaubte ARIA-Rollen	`presentation` oder `none`
DOM-Schnittstelle	[`HTMLHRElement`](/de/docs/Web/API/HTMLHRElement)

Spezifikationen

Specification
HTML # the-hr-element