When is it semantically correct to use the hr element?

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?