Presentational vs. Structural

---

This chapter covers the difference between presentational and structural markup—but more specifically the difference between using <strong> instead of <b>, and likewise, <em> instead of <i>. Later in the chapter, we'll also talk about a few other phrase elements and their importance in the world of standards-compliant, structured markup.

You may have heard others telling you to swap out <strong> for <b> when bold text is desired, but with no further explanation as to why you should make the switch. And without the "why," it's hard to expect other designers to change their markup habits just because they are being told to.

Why are <strong> and <em> Better Than <b> and <i>?

What's all this hoo-ha about tossing out the <b> and <i> tags in favor of <strong> and <em>? Well, it's all about conveying meaning and structure, rather than giving a presentational instruction. And it's that same structure that we're striving for in the examples throughout the book.

Check in with the Experts

First, let's hear what the W3C says about <strong> and <em> as part of the HTML 4.01 Specification on Phrase Elements (www.w3.org/TR/html4/struct/text.html#h-9.2.1):

"Phrase elements add structural information to text fragments. The usual meanings of phrase elements are [the] following:

 <em> 

indicates emphasis.

 <strong> 

indicates stronger emphasis."

So we're talking two levels of emphasis here—for instance, a word or phrase that is intended to be louder, higher in pitch, faster or, well . . . emphasized more than normal text.

The W3C goes on to say the following:

"The presentation of phrase elements depends on the user agent. Generally, visual user agents present <em> text in italics and <strong> text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch, and rate accordingly."

Aha, that last sentence is of particular interest. Speech synthesizer user agents (what we've been calling "screen readers") will treat emphasized words and phrases the way they were intended, and that is surely a good thing.

Alternatively, using <b> or <i> is simply a visual presentation instruction. If our goal is to separate structure from presentation as much as possible, then we'll be right on track when we use <strong> and <em>, saving instances where you simply want bold or italicized text, visually, for CSS. And we'll talk more about those instances later in the chapter.

Let's look at two markup examples to help us figure out the difference.

Method A

 Your order number for future reference is: <b>6474-82071</b>. 

Method B

 Your order number for future reference is: <strong>6474-82071</strong>. 

Bold and Beautiful

Here's a perfect example of a situation where using <strong> over <b> is appropriate— where we're looking to give greater importance over the rest of text in the sentence. In addition to visually rendering the order number in bold text, we'd also like screen readers to change the way they present that particular bit as well—increasing the volume, or changing the pitch or rate. Using Method B does both of these for us.

What About <em>?

Similarly, by using <em> over <i>, we can convey emphasis rather than just making the text italic. Let's look at two examples.

Method A

 It took me not one, but <i>three</i> hours to shovel my driveway this morning. 

Method B

 It took me not one, but <em>three</em> hours to shovel my driveway this weekend. 

Emphasis Mine

In the preceding example (a true statement at the time of this writing), my intention is that the word "three" be spoken with emphasis over the rest of the text, as if I was reading it aloud. Visually, Method B will be rendered as italicized text in most browsers, and speech synthesizers will adjust the tone, speed, or pitch accordingly.

Just Bold or Italic, Please

It's important to note that there may be plenty of scenarios where you'd like bold or italic text for the visual effect only. In other words, let's say you had a list of links contained in a sidebar, and you're fond of the way the all of the links look—in bold text (see Figure 6-1, for example).

Figure 6-1: An example of a list of bold links contained within a sidebar

There is no intention of a strong emphasis on the links, other than a visual characteristic. This is where it's best to let CSS handle the visual change in the link's appearance, so as not to convey emphasis for screen readers and other nonvisual browsers.

For instance, do you really intend to have the list of bold links read faster, louder, or higher in pitch? Probably not. The bold intention is purely presentational.

Worth its (Font-)Weight in Bold

To demonstrate in code what Figure 6-1 illustrates, let's say the column of links is a <div> with an id of sidebar. We could simply state in CSS that all links within #sidebar be bold like this:

 #sidebar a {   font-weight: bold;   } 

Extremely simple, and I feel sort of silly making a point out of it—yet it's a perfectly easy way to continue to help separate content from presentation.

That's Italic!

Likewise, the same can be applied when thinking about italic text—for instances where you're not intending emphasis, but rather you're simply intending to render text in italics. CSS can again be used for such cases through the font-style property.

Let's use the same #sidebar column as an example; for instance, if we'd like all of the links within #sidebar to be italic, the CSS would go like this:

 #sidebar a {   font-style: italic;   } 

Again, an absurdly simply concept, yet I think it's important to talk about in the realm of structured markup—instances where instead of using presentational markup, we allow CSS to handle the styling. Sometimes, the simplest solutions are the easiest to overlook.

Both Bold and Italic

For scenarios where you're intending to render text both in bold and italics, then I feel a decision would first need to be made. What level of emphasis are you trying to convey? Based on your answer, I would choose the correct element: <em> (for emphasis) or <strong> (for stronger emphasis) and mark up the text with that element.

For instance, for the following example, I'd like the word "fun" to appear both bold and in italics. I've chosen to use the <em> element to emphasize the text as well.

 Building sites with web standards can be <em>fun</em>! 

Most browsers will render the preceding only in italics. To achieve both bold and italics, we have a few different options. Oh, and I sincerely hope that you agree with the preceding statement.

Generic <span>

One option would be to nest a generic <span> element around "fun" as well and use CSS to render all <span> elements within <em> elements in bold text. The markup would look like this:

 Building sites with web standards can be <em><span>fun</span></em>! 

while the CSS would go like this:

 em span {   font-weight: bold;   } 

Obviously, not ideal in the semantic department because of the extraneous tag we're adding—but one that will work nonetheless.

Emphasis with Class

Another option would be to create a class for <em> elements that triggered the bold with CSS. The markup would look like this:

 Building sites with web standards can be <em >fun</em>! 

while the CSS would go like this:

 em.bold {   font-weight: bold;   } 

The presence of the <em> element would handle our italicizing (and implied emphasis), while adding the class bold would also make the text within the <em> tag, well . . . bold.

A similar setup could be used in reverse for <strong> elements, where an italic class could be written to render text in italics in addition to the bold that comes with the <strong> tag when used for stronger emphasis.

The markup would go like this:

 Building sites with web standards can be <strong >fun</strong>! 

While the CSS would go like this:

 strong.italic {   font-style: italic;   } 

---