I don’t see the venerable horizontal rule (the <hr> element) get used much in online writing. The element is used to indicate a section break or another break not worthy of a new headline or a full chapter. It’s still fairly common in books and print magazines. I more commonly see an extra line break (an <br> element) or even an advertisement inserted where the author moves from one topic to the next in articles on the web.
I think that some of the reasons why the horizontal rule element isn’t used is that it’s rendered as a solid black horizontal line by default. However, the element can still perform its semantic job and keep beautiful and traditional typographic conventions.
I’ve started to use the traditional asterism, a character consisting of three asterisks (⁂) centered in the middle of two lines to indicate such breaks. This traditional typesetter practice looks a lot like an ornament that just happens to create a break in the text; readers won’t get puzzled when they encounter the character for the first time. It’s well suited for the job of breaking up a long text into more manageable chunks.
Below is an example styling of the hr element where the default horizontal line is replaced by a centered asterism set in a slightly lighter (due to the opacity) color. These characters are sometimes rendered a bit bigger than the surrounding text, however, the character itself is quite tall so this isn’t necessary to specify in the stylesheet.
hr {
background: none;
border: 0;
margin: 0.5em 0;
padding: 0;
}
hr::after {
content: '⁂';
display: block;
opacity: 0.8;
line-height: 1;
text-align: center;
}CSS implementation of a centered asterism (shown before that last paragraph of this article.)
Semantically, the hr element is defined as a flow element and should thus be used in between two section elements. For example, the hr element can be used when the second section doesn’t need a distinct headline but you still want to indicate that you’re starting another distinct section.
A font capable of rendering Unicode character U+2042 ⁂ is included in most mobile and desktop operating systems. Browsers shouldn’t have any problems rendering it. There are some ways to achieve a similar effect if the character the missing character (a rectangle) shown as a fallback in old browsers is an unacceptable design degradation. You can use three separate asterisks (***) on a line for that authentic cheap print look, or use one asterisk followed by a line break and two more asterisks where both lines are centered.
If you want to use another character in place of the asterism as an ornamental break, you can have a look into the fleurons (❧.) There are three variants of this flowery set of characters in Unicode, but I find all of them more distracting than the more ignorable asterism.
I’m quite fond of these traditional and arcane typographic characters that still clearly express meaning that anyone can get the meaning of when they see it. A nice example is the interrobang, a character consisting of an exclamation point and a question mark that’s sharing a single dot (‽.) I find it both beautiful, fun, and expressive. It’s great for expressing shock with a bang. I use quite a few arcane typographic characters every day.