Foundation HTML5 with CSS3

Constructing Content

The b element calls attention to a word or phrase, but doesn’t imply the greater importance that a strong

element does, nor the alternate voice or mood that an i element indicates. You might use the b element to

mark the key words in a summary, the leading sentence in an article, a “drop cap” at the beginning of a

chapter, or product brand names in a review.

<p>Our shrink rays operate via <b>transdimensional mass exchange</b>, not

<b>intra-molecular compression</b>, so they’re safe for everyday use.</p>

The u element underlines text, and can be used for marking text with non-textual annotations such as

proper names in Chinese text, or for marking misspelled words. Because links are conventionally

underlined, avoid using the u element where it might be mistaken for a link. There are very few cases

where a u element would be appropriate at all; another element will almost always be more fitting.

<p>She wrote in her letter, <q>my compact <u class="sp" title="sic">lazer</u>

torch has helped me out of more jams than I can count.</q></p>

The s element indicates text that is no longer accurate or no longer relevant, and has thus been stricken

through or crossed out, like the original price of an item currently on sale. This isn’t the same as deleted or

replaced text, which calls for the similarly styled del element. Stricken text is still there for reading, it’s just

outdated or inaccurate.

<p>V900 Shrink Ray: <s class="reg-price">$10,799</s> <em>marked down to

<strong class="sale-price">$9,799</strong>, this week only!</em></p>

Figure 4-24 shows the default styling for all four of these offset text elements. In keeping with their

newfound semantic significance, don’t assume these elements have to be styled according to the classic

browser defaults. A b element doesn’t have to be bold and a u element doesn’t have to be underlined; you

can change these default styles with CSS.

Figure 4-24. Offset text with default styling

Required Attributes

There aren’t any required attributes for the i, b, u, or s elements.