Wann ist es semantisch korrekt, das hr-Element zu verwenden?

Question

Die HTML5 reference sagt, dass

Das hr-Element einer Absatzebene thematischen Bruch darstellt, z.B. ein Szenenwechsel in einer Geschichte oder ein Übergang zu einem anderen Thema in einem Abschnitt eines Nachschlagewerks.

Diese Beschreibung ist nicht genug beschreibend für mich. Ich benutze das Element hr in meinen HTML-Dokumenten, um Inhalte zu trennen. Ist das richtig?

Könnte jemand ein paar Beispiele geben, wann er es benutzen sollte (abgesehen von den gezeigten Beispielen) und wann man stattdessen CSS Styling verwenden sollte?

Answer 1

Es ist richtig, es zu verwenden, wenn Sie, sagen wir, mehrere Absätze mit zwei verschiedenen Themen haben.

<p>Paragraph about domestic kittens</p> 
<p>Paragraph about kittens' favourite foods</p> 
<p>Paragraph about kittens' playfulness</p> 
<hr> 
<p>Paragraph about my day at work</p> 

Wenn Sie Themen zwischen Bildern und Inhalten trennen möchten, glaube ich, dass dies auch angemessen ist.

<img src="/img/kitten.jpg" alt="kitten playing with ball"> 
<img src="/img/kitten1.jpg" alt="kitten drinking milk"> 
<hr> 
<img src="/img/zebra.jpg" alt="zebras in the wild"> 

Die neue Verwendung von hr scheint für die Unterscheidung Themen in HTML nur zu sein. Wenn Sie feststellen, dass Ihre Inhalte gut verbunden sind, sollten Sie das Tag nicht verwenden.

Answer 2

Meine kurze Antwort und die Art und Weise, wie ich darüber gegangen bin, ist, dass ich <hr> 's verwende, wenn es einfach keine andere Möglichkeit gibt, sauber mit CSS zu arbeiten. Für mich hat dies in viele Jahre des Schreibens von HTML übersetzt und nie eine <hr> verwenden müssen.

Schließlich konnte ich mich selbst mit einer <hr> sehen, wenn ich nur versuche, eine Art Marker zwischen zwei Abschnitten des gleichen Inhalts zu setzen.

Verwenden eines Beispiels für einen Blogpost: Ich würde eine <hr> setzen, wenn ich fühle, dass es visuell wichtig ist, von einem Thema zu einem anderen zu wechseln.

Answer 3

Nach this article

In HTML 4.01, der <hr> Tag eine horizontale Linie dargestellt.

In HTML5 definiert der Tag <hr> einen thematischen Bruch.

jedoch die <hr> Tag immer noch als eine horizontale Linie in visuellen Browsern angezeigt werden, ist aber jetzt in semantische Begriffe definiert, anstatt Präsentations Begriffe.

Alle Layoutattribute (align, noshade, size und width) in HTML 4.01 waren in HTML 4.01 veraltet und werden in HTML5 nicht unterstützt. Verwenden Sie CSS zu style das <hr> Element stattdessen.

Verwenden Sie in HTML5 <hr>, wenn Sie Ihr Thema von dem zuvor geschriebenen Absatz umleiten.