Quando è semanticamente corretto utilizzare l'elemento hr?

Question

Il HTML5 reference dice che

L'elemento hr rappresenta pausa tematica un livello punto, ad esempio un cambio di scena in una storia o una transizione a un altro argomento all'interno di una sezione di un libro di riferimento.

Questa descrizione non è abbastanza descrittiva per me. Uso l'elemento hr nei miei documenti HTML come metodo per separare il contenuto. È corretto?

Qualcuno potrebbe dare qualche esempio su quando usarlo (a parte gli esempi mostrati) e quando utilizzare lo stile CSS?

Answer 1

È opportuno utilizzarlo quando si dispone, ad esempio, di più paragrafi con due temi distinti.

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

Se si desidera altrimenti separare temi tra immagini e contenuti, credo che sia anche appropriato.

<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"> 

Il nuovo uso di hr sembra essere solo per distinguere gli argomenti di HTML. Se ritieni che i tuoi contenuti siano ben collegati, non pensare di dover utilizzare il tag.

Answer 2

La mia risposta breve e il modo in cui sono andato su di esso è che io uso <hr> quando non c'è altro modo per farlo in modo pulito con CSS. Per me questo ha tradotto in molti anni di scrittura html e non ho mai dovuto usare uno <hr>.

Alla fine, ho potuto vedere me stesso utilizzando un <hr> se sto solo cercando di mettere una sorta di marcatore tra due sezioni dello stesso contenuto.

Utilizzo di un esempio di post di blog: inserisco uno <hr> quando ritengo che sia visivamente importante passare da un argomento a un altro.

Answer 3

Secondo this article

In HTML 4.01, il tag <hr> rappresentava una linea orizzontale.

In HTML5, il tag <hr> definisce un'interruzione tematica.

Tuttavia, il tag <hr> può ancora essere visualizzata come una linea orizzontale in browser visuali, ma ora è definito in termini semantici, piuttosto che termini di presentazione.

Tutti gli attributi di layout (align, noshade, size e width) in HTML 4.01 non sono supportati in HTML 4.01 e non sono supportati in HTML5. Usa il CSS allo stile invece dell'elemento <hr>.

In HTML5, utilizzare <hr> quando si trasferisce l'argomento dal paragrafo precedentemente scritto.