<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 Juli 2015.
Das <hr>-HTML-Element repräsentiert einen thematischen Bruch zwischen Elemente auf Absatzebene: zum Beispiel ein Szenenwechsel in einer Erzählung 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 #333333;
color: #333333;
overflow: visible;
text-align: center;
height: 5px;
}
hr::after {
background: white;
content: "§";
padding: 0 4px;
position: relative;
top: -13px;
}
Historisch gesehen wurde das <hr>-Element immer als horizontale Linie dargestellt. Während es in visuellen Browsern weiterhin als horizontale Linie angezeigt werden kann, wird dieses Element jetzt semantisch statt präsentationell definiert. Wenn Sie also eine horizontale Linie zeichnen möchten, sollten Sie dies tun, indem Sie einem bestehenden Element über CSS einen Rahmen hinzufügen.
Die Eigenschaften border-* (zum Beispiel border-style und border-color) ermöglichen es Ihnen, das Erscheinungsbild einer Linie erheblich anzupassen, unabhängig davon, ob Sie ein <hr>-Element oder einen auf einem anderen Element gezeichneten Rahmen anpassen.
Attribute
Die Attribute dieses Elements umfassen die globalen Attribute.
alignVeraltet Nicht standardisiert-
Setzt die Ausrichtung der Linie auf der Seite. Wenn kein Wert angegeben wird, ist der Standardwert
left. colorVeraltet Nicht standardisiert-
Setzt die Farbe der Linie über Farbnamen oder hexadezimale Werte.
noshadeVeraltet Nicht standardisiert-
Legt fest, dass die Linie keine Schattierung hat.
sizeVeraltet Nicht standardisiert-
Setzt die Höhe der Linie in Pixeln.
widthVeraltet Nicht standardisiert-
Setzt die Länge der Linie auf der Seite durch einen Pixel- oder Prozentwert.
Beispiel
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 kein End-Tag haben. |
| Zulässige Eltern |
|
| Implizierte ARIA-Rolle | separator |
| Zulässige ARIA-Rollen |
presentation oder none
|
| DOM-Schnittstelle | [`HTMLHRElement`](/de/docs/Web/API/HTMLHRElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-hr-element |