Summary

Use of the hr element to indicate context breaks allows assistive technologies to inform users of the change.

Techniques

Examples

Example 1 — Blank-line context change

The CSS margin property is used to add 1em of space around the hr tag (0.5em to the top and bottom). Setting the width to 0 prevents a rule from being drawn.

<style type="text/css">hr.transition {
   width: 0;
   margin: 0.5em 0;
}
</style>

<p></p>
<hr class="transition"/>
<p></p>
Example 2 — Asterism

A background image is used to add asterisks in place of a rule.

<style type="text/css">hr.transition {
   background: url('img/asterisks.gif') no-repeat center;
   height: 1em;
   border: none;
   margin: 0.5em 0em;
}
</style>

<p></p>
<hr class="transition"/>
<p></p>

Frequently Asked Questions

Why shouldn't I use CSS to increase padding or margins to get the same effect?

Although you may get the same visual effect, the user is given no information that a change in context has occurred. CSS class names carry no semantic meaning.

Print-first workflow tools often use this CSS technique to indicate context changes when exporting, but it is inherently inaccessible.

Can I insert an img tag to indicate context change?

Images are a suboptimal way to indicate a context change because they carry no semantic information. Unlike pure CSS solutions, the alt attribute can be used to indicate the context change, but that doesn't compensate for the more uniform experience that the hr element can provide.

Explanation

A context break represents a shift in thought, time, location, or similar in a work of fiction or non-fiction. These changes are typically represented by a noticeable blank space between paragraphs (i.e., considerably more than occurs between paragraphs). A context break sometimes include asterisms and other decorations (traditionally when the shift occurs immediately at the bottom of a print page where it might not be apparent).

In the past, CSS margins and images have been used to include context breaks, but the HTML5 specification has redefined the semantics of the hr element specifically for this purpose. CSS styling can be applied to change the default appearance.

The hr element should not be used for purely decorative purposes, such as decoration between sections, or at the beginning or end of them.

Related Links