The HTML5 reference says that
The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
That description is not enough descriptive to me. I use the hr
element in my HTML documents as a way to separate content. Is this correct?
Could anyone give a few examples on when to use it (apart from the examples shown) and when to use CSS styling instead?
Although previous versions of HTML defined the hr element only in presentational terms, the element has now been given the specific semantic purpose of representing a “paragraph-level thematic break”.
<hr>: The Thematic Break (Horizontal Rule) element The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag, and it does not require an end tag. Used to specify the alignment of the horizontal rule.
It's proper to use it when you have, say, several paragraphs with two distinct themes.
<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>
If you'd like to otherwise separate themes among images and content, I believe this is also appropriate.
<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">
The new use of hr
seems to just be for distinguishing topics within HTML. If you find that your content is well-connected, don't feel that you need to use the tag.
According to this article
In HTML 4.01, the
<hr>
tag represented a horizontal rule.In HTML5, the
<hr>
tag defines a thematic break.However, the
<hr>
tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.All layout attributes (align, noshade, size, and width) in HTML 4.01 was deprecated in HTML 4.01, and is not supported in HTML5. Use CSS to style the
<hr>
element instead.
In HTML5, use <hr>
when you are diverting your topic from the previously written paragraph.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With