Context Breaks

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 large blank space between paragraphs, which sometimes including 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 between sections or at the beginning or end of them.

Examples

Example 1 — Blank-line context change

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

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

Example 2 — Asterism (CSS only)

hr.transition {
   background: url('img/asterisks.gif') no-repeat center;
   height: 1em;
   border: none;
   margin: 0.5em 0em;
}

Compliance References and Standards

HTML5 — The hr element

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

Again, 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.