Font Styles

The style elements provide a straightforward way to control the font. These elements fall into two categories: physical styles and logical styles. The style elements provide only crude control over the appearance of your text. For more sophisticated techniques, refer to “Font Control”.

Logical Styles

A logical style indicates that the enclosed text has some sort of special meaning. We’ve already seen the em element, which indicates that the enclosed text should be emphasized (stressed when spoken). The list of available logical style elements includes:

Wait — “Usually rendered as italic?” What does that mean? Shouldn’t em, cite, and dfn always render as italic?

Well, not necessarily.

Okay… but why do em, dfn, and cite all render the same by default? If I want italic, why wouldn’t you just use em and forget about the rest?

Well, sure, you could do that. However, using a richer set of elements gives you finer control. For example, you could declare that emphasized text is red and bold, but all citations are green and italic. You can also use logical style elements to extract more meaning out of a website. For example, if you knew that a website uses the cite element consistently, you could easily write a program to extract a list of citations. (But don’t obsess over that point; there are better ways to store and consume this sort of information.)

The key point to remember is that a cite element is a citation, not a chunk of italic text. The italics are just a useful side effect.

Inline vs. Block Elements

Unlike the paragraph and header elements, the style elements listed above don’t mark off a “block” of text. The physical style elements are inline elements that perform their work without adding extra line breaks:

Example 2.9. Inline vs. Block Elements

<p>
1. This is a paragraph with a section of
<em>emphasized text</em> inside of it.
</p>

<em>
2. This is a section of emphasized text with
<p>a paragraph</p> inside of it.
</em>

The first sentence results in one “block” with a couple of emphasized words inside. In the second sentence, the p element breaks the text up into multiple blocks.

Physical Styles

Physical style elements specify a particular font change. For example, to make text bold, you can mark it off with the b element: <b>bold text</b>. The list of available physical style elements includes:

The physical styles are subtly different from the logical styles. The logical style element strong means “something strongly emphasized,” while the physical style element b just means, “something that is bold.”

A Digression: Physical Styles and Semantic Markup

These days, you’ll sometimes hear people claim that the physical styles are yucky and bad and should never be used. This is because logical styles contain small quantities of a rare earth named “Semanticism”. Semanticism can be mined and processed into the power source for farms of spinning Academic Paper Turbines, which serve to feed and clothe members of our society who would otherwise starve to death.

Although it is true that certain physical styles are obsolete, the i, b, sub, and sup elements are appropriate to use in certain situations. For example, compare these code samples:

In this case, i is more appropriate than em, unless you think it’s appropriate to always be shouting the “U.S.S. Maine” part. Not that i is all that wonderful, but em is just flatly wrong. Maybe it would be nice if we had a vessel element, but HTML is a small language, and the i element is the best we can do.

For a more extreme example, consider the quantity “2 to the x power,” represented in HTML as 2<sup>x</sup>. If we take away the superscript, this leaves us with 2x, which is most emphatically not equal to “2 to the x power.” Even though the sup element literally means, “move the 2 above the line”, this physical change to the text has actual mathematical meaning! (Thanks to Jacques Distler for pointing this one out.)