Constructing Content - HTML5 with CSS3 - page 104

of structured text. In this next section, we'll move inside the blocks to pick out smaller morsels of content
for special attention.
These elements are called phrasing elements because they're intended to wrap around a short string of a
few words, or even a single word, to give it added meaning and formatting that sets it apart from the other
words that surround it. These elements are all displayed as inline by default, they can only contain text or
other phrase elements, and all of them require an end tag.
Emphasis and Importance: em and strong
The em element adds emphasis to a word or phrase, and browsers typically style it in an italicized font. The
strong element adds strong emphasis to highlight words or phrases of greater importance than the
surrounding text, and it's usually styled in a bold font. Though graphical browsers usually style these
elements in italics or bold, don't focus only on appearances; other devices may apply emphasis differently.
For example, screen-reading software used by the visually impaired might read the contents of an em or
strong aloud with different vocal inflections. These elements have real meaning, not just font styling. A
strong element says, “this is important, pay attention,” not just, “this text is bold.”
Listing 4-25 shows a passage of text with some emphasized phrases. For yet another level of emphasis,
you can combine the strong and em elements, effectively declaring that the text is both emphasized and
important, displayed in a font that is both italicized and boldfaced (see Figure 4-12).
Listing 4-25. A paragraph containing some emphasized phrases
<p> <strong>Please note:</strong> due to the accelerated decay rate of
phlebotinum isotopes upon activation, <em>we cannot accept returns</em>
of opened vials of youth, growth, intelligence, or strength serums.
<strong><em>All sales are final.</em></strong> </p>
Figure 4-16. The contents of em are italicized, the contents of strong are boldfaced, and the combined elements have
a combined style.
You can also nest em or strong elements, and the number of parent em or strong elements indicates the
relative level of emphasis or importance, as shown in Listing 4-26. An em within an em is extra-emphasized
and a strong inside a strong is super-important. The layers of emphasis are purely semantic and
browsers don't style these nested elements any differently than their parents, but you can easily change
that in your own CSS.
Listing 4-26. Nested em and strong elements imply higher levels of emphasis and/or importance
<p><em><strong>Warning!</strong> these premises are protected by
<em>cyborg space gorillas with <em>laser eyes</em></em>.
<strong><strong>Enter at your own risk!</strong></strong></em></p>