HTML-Element <hr> für einen thematischen Umbruch (horizontale Linie)

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;
}

Attribute

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

align

Legt die Ausrichtung der Linie auf der Seite fest. Wenn kein Wert angegeben wird, ist der Standardwert left.

color

Legt die Farbe der Linie durch einen Farbnamen oder einen Hexadezimalwert fest.

noshade

Legt fest, dass die Linie keine Schattierung hat.

size

Legt die Höhe der Linie in Pixeln fest.

width

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

Hinweise zur Verwendung

Historisch wurde das Element <hr> stets als horizontale Linie dargestellt. Auch wenn es in grafischen Browsern weiterhin als horizontale Linie angezeigt werden kann, ist dieses Element heute nach seiner Semantik und nicht nach seiner Darstellung definiert. Wenn Sie eine horizontale Linie zeichnen möchten, sollten Sie daher mit CSS einem vorhandenen Element einen Rahmen hinzufügen.

Mit den border-*-Eigenschaften (beispielsweise border-style und border-color) können Sie das Erscheinungsbild einer Linie umfassend anpassen – unabhängig davon, ob Sie ein <hr>-Element oder einen Rahmen an einem anderen Element gestalten.

Beispiele

Thematischer Umbruch zwischen Absätzen

Das folgende Beispiel fügt einen thematischen Umbruch zwischen Elementen auf Absatzebene ein.

HTML

<article>
  <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>
</article>

Ergebnis

Thematischer Umbruch zwischen Listeneinträgen

Das <hr>-Tag kann innerhalb eines Listeneintrags platziert werden, um Abschnitte einer Liste optisch voneinander zu trennen.

HTML

<ul>
  <li>Cut</li>
  <li>Copy</li>
  <li>Paste</li>
  <li role="presentation"><hr /></li>
  <li>Delete</li>
</ul>

ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100px;
  margin: 0.75rem;
  padding: 0.75rem;
  border: 1px solid lightgrey;
}
hr {
  margin-block: 0.2rem;
  color: lightgrey;
}

Ergebnis

Thematischer Umbruch zwischen Auswahloptionen

Das Element <hr> ist innerhalb eines <select>-Elements zulässig und erzeugt dort eine optische Trennung zwischen <option>-Elementen.

HTML

<select>
  <option value="">--Choose an option--</option>
  <hr />
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <hr />
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <p>
• <hr> in <select>