Constructing Content - HTML5 with CSS3 - page 88

Listing 4-14. Poetry wrapped in a pre element to preserve its formatting
<pre>
even little things
can have great impact if they're
radioactive
</pre>
The pre element is flow content and it can only contain phrasing elements. Browsers typically render the
contents of a pre in a monospace typeface, as you can see in Figure 4-6.
Figure 4-6. The spaces and returns remain intact on the rendered page
Because the pre element preserves white space exactly as it's coded, long lines of text
will not automatically wrap to fit their container the way ordinary text in HTML does.
Required Attributes
There are no required attributes for the pre element.
Optional Attributes
The pre element doesn't offer any optional attributes.
hr
The hr element creates a horizontal rule, a dividing line between sections of content. It's largely
presentational, but the semantic intent of an hr is to indicate a paragraph-level thematic break such as a
change of topic within a section, or a change of scene in a story. Now that HTML5 has given us the
specialized section element, you might use separate section s to indicate these topic changes, but the
hr element can still be preferable in some cases.
It's a replaced, void element that can hold no content and has no end tag, though you can optionally close
it with a trailing slash ( <hr/> ) as you would in XHTML. Listing 4-15 shows an hr element between two
paragraphs, marking a change in the story's setting.
Listing 4-15. A horizontal rule marks a change of topic within a section
<p>And so the day was saved once again, and the sun sank slowly
in the west, casting its warming glow across a grateful city.</p>
<hr>
<p>Meanwhile, in dank caverns deep below the surface of the Earth,
unrest was stirring amongst the Mole People.</p>