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