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:

em

Emphasizes text. Usually rendered as italic.

Please do <em>not</em> feed the monkeys.

strong

Strongly emphasizes text. Usually rendered as bold.

<strong>WARNING:</strong> Never feed the monkeys
under any circumstances.

cite

Indicates a citation or reference. Usually rendered as italic.

For more information, please refer to
<cite>The Dangers of Monkey Feeding, Vol 2</cite>.

dfn

Indicates the defining instance of a term; usually applied when the term first appears. Usually rendered as italic.

Monkeys have sharp <dfn>canines</dfn>, sharp pointy
teeth to bite you with.

acronym

indicates an acronym, such as RADAR (RAdio Detection And Ranging); also provides a title attribute that may contain the fully-spelled out version of the acronym. Hovering your mouse over the acronym causes many browsers to display a “tooltip” with the contents of the title attribute. Rendering is inconsistent; some browsers display a dotted underline, while others do nothing special.

In particular, beware of
<acronym title="Monkeys Of Unusual Size">MOUS</acronym>es.

code

Indicates computer code fragments and commands. Usually rendered in a monospaced font.

<code>10 PRINT "I LOVE MONKEY CHOW"<br>
20 GOTO 10</code>

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

Well, not necessarily.

• By default, most browsers render em as italic. However, this is only a convention. Nothing requires browsers to use italic, and in fact, some browsers (such as an text-to-speech synthesis browser) might be completely unable to use italic.

• Although the default is italic, you can override this using CSS. For example, you could specify that on your website, all em elements render as red and bold.

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:

The first sentence results in one “block” with a couple of bold words inside of it. 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:

b

Makes text bold. Appropriate for product names, …

Today, UniStellarDefenseCorp is proud to announce
<b>Neutrinozon</b>, the only neutrino-based death ray
on the market.

i

Makes text italic. Appropriate for ship names, internal monologues and thoughts, …

This exciting new product has already been installed on many
advanced warships, including the <i>I.S.S. Hood</i>.

sub

Makes text a subscript. Appropriate for scientific and mathematical notation, …

Although the standard electron neutrino (ν<sub>e</sub>)
configuration packs plenty of punch, muon neutrino
(ν<sub>μ</sub>) upgrades are available on request.

sup

Makes text a superscript. Appropriate for footnotes, scientific and mathematical notation, …

With an intensity of 1.76x10<sup>6</sup>

cm<sup>-2</sup>s<sup>-1</sup>, nothing can repel firepower
of this magnitude!

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 often 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:

1. My grandfather served on the <i>U.S.S. Maine</i>.
   

2. My grandfather served on the <em>U.S.S. Maine</em>.
   
   

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. It would be nice if we had a vessel element, but HTML is a relatively 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^x. 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.)