hr – der thematische Einschnitt

Das hr-Element bedeutet seit HTML5 einen thematischen Wechsel innerhalb eines Abschnitts – der Übergang zu einem anderen Gedanken, ohne dass eine neue Überschrift beginnt. Die waagerechte Linie ist nur die voreingestellte Darstellung dieser Bedeutung.

Ein passender Einsatz

<section>
  <h2>Rückblick</h2>
  <p>Der erste Teil der Geschichte.</p>

  <hr>

  <p>Jahre später, an einem anderen Ort.</p>
</section>

Klassisch ist die Verwendung in erzählenden Texten – der Szenenwechsel, der in Büchern durch eine Leerzeile mit Sternchen dargestellt wird.

Wann es falsch ist

<!-- reine Gestaltung: gehört in CSS -->
<hr>
<footer>…</footer>

Eine Linie über dem Fußbereich markiert keinen thematischen Wechsel, sondern eine Grenze im Layout. Richtig ist dafür eine Rahmenlinie:

footer {
  border-top: 1px solid #d4d4d8;
  padding-top: 1.5rem;
}

Der Unterschied wird beim Hören deutlich: Manche Screenreader kündigen ein hr als Trennung an. Eine Linie, die nur Gestaltung ist, erzeugt dann eine Ansage ohne Inhalt.

Schreibweise und Attribute

hr ist ein leeres Element ohne schließendes Tag. Die alten Attribute size, width, align und noshade sind seit HTML5 ungültig – Aussehen, Länge und Ausrichtung gehören in CSS:

hr {
  border: 0;
  height: 1px;
  background: #d4d4d8;
  margin: 2rem 0;
}

Der Umweg über border: 0 ist nötig, weil Browser die Linie voreingestellt als Rahmen zeichnen und sie sonst doppelt erscheint.

Kurz zusammengefasst

Die Prüffrage lautet: Geht es hier inhaltlich weiter mit etwas anderem? Dann hr. Soll nur eine Linie zu sehen sein? Dann CSS.