<hr> HTML thematischer Bruch (horizontale Linie) Element

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

In der Vergangenheit wurde das <hr>-Element immer als horizontale Linie dargestellt. Während es in visuellen Browsern noch als horizontale Linie angezeigt werden kann, wird dieses Element jetzt in semantischen Begriffen und nicht in präsentationellen Begriffen definiert. Wenn Sie also eine horizontale Linie zeichnen möchten, sollten Sie dies tun, indem Sie einer bestehenden Element mit CSS eine Linie hinzufügen.

Die border-*-Eigenschaften (zum Beispiel border-style und border-color) ermöglichen es Ihnen, das Erscheinungsbild einer Linie erheblich anzupassen, egal ob Sie ein <hr>-Element oder eine auf einem anderen Element gezeichnete Linie anpassen.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

align

Setzt 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 hexadezimale Werte.

noshade

Setzt die Linie so, dass sie keine Schattierung hat.

size

Setzt die Höhe der Linie in Pixeln.

width

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

Beispiel

Thematischer Bruch zwischen Absätzen

Das folgende Beispiel fügt einen thematischen Bruch zwischen Elemente 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 Bruch zwischen Listeneinträgen

Das <hr>-Tag kann innerhalb eines Listeneintrags platziert werden, um eine visuelle Trennung zu schaffen, und einen Separator zwischen Abschnitten einer Liste zu erstellen.

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 Bruch zwischen Auswahloptionen

Das <hr>-Element ist innerhalb eines <select>-Elements erlaubt, um einen visuellen Separator zwischen <option>-Elementen zu erstellen.

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>