• Choose a category
• All
• Classic-Fiction

Using Emphasis and Strong Emphasis

You may be shocked to know that XHTML doesn’t allow italics or bold. Old-style HTML had the tag for italics and the tag for bold. These seem easy to use and understand. Unfortunately, they can trap you. In your XHTML, you shouldn’t specify how something should be styled. You should specify instead the purpose of the styling. The and tags are removed from XHTML Strict and replaced with and .

Adding emphasis to the page

The tag means emphasized. By default, em italicizes your text. The tag stands for strong emphasis. It defaults to bold.

Figure 3-2 illustrates a page with the default styles for em and strong.

The code for the emphasis.html page is pretty straightforward. It has no CSS at all:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Emphasis and Strong Emphasis

This paragraph illustrates two main kinds of emphasis.

This sentence uses the em tag.

By default, emphasis is italic.

This sentence uses strong emphasis.

The default formatting of strong emphasis is bold.

Of course you can change the formatting with CSS.

This is a great example of semantic formatting.

Rather than indicating the formatting

of some text, you indicate how much it is emphasized.

This way, you can go back and change things, like adding color

to emphasized text without the formatting commands

muddying your actual text.

It’d be improper to think that em is just another way to say italic and strong is another way to say bold. In the old scheme, after you define something as italic, you’re pretty much stuck with that. The XHTML way describes the meaning, and you can define it how you want.

Modifying the display of em and strong

Figure 3-3 shows how you might modify the levels of emphasis. I used yellow highlighting (without italics) for em and a larger red font for strong.

Figure 3-2: You can use em and strong to add emphasis.

Figure 3-3: You can change the way that em and strong modify text.

The code for emphasisStyle.html (as shown in Figure 3-3) is identical to the code for emphasis.html (as shown in Figure 3-2). The only difference is the addition of a style sheet. The style sheet is embedded in the Web page between style tags. Check out Chapter 1 of this minibook for a refresher on how to incorporate CSS styles in your Web pages.

The style is used to modify the XHTML. The meaning in the XHTML stays the same — only the style changes.

The semantic markups are more useful than the older (more literal) tags because they still tell the truth even if the style has been changed. (In the XHTML code, the important thing is whether the text is emphasized, not what it means to emphasize the text. That job belongs to CSS.)

What’s funny about the following sentence?

is always bold.

Get it? That’s a bold-faced lie! Sometimes I crack myself up.

Defining Classes

You can easily apply a style to all the elements of a particular type in a page, but sometimes you might want to have tighter control of your styles. For example, you might want to have more than one paragraph style. As an example, look at the classes.html page featured in Figure 3-4.

Figure 3-4: Each joke has a question and an answer.

Once again, multiple formats are on this page:

♦ Questions have a large italic sans serif font. There’s more than one question.

♦ Answers are smaller, blue, and in a