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.
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.
abbr— indicates an abbreviation or acronym, such as RADAR (RAdio Detection And Ranging); also provides a
titleattribute that may contain the fully-spelled out version. Hovering your mouse over the
abbr>> causes many browsers to display a “tooltip” with the contents of the
titleattribute. 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
dfn always render as italic?
Well, not necessarily.
- By default, most browsers render
emas 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
emelements render as red and bold.
Okay… but why do
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 style elements specify a particular font change. For example, to make text bold, you can mark it off with the
</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 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
sup elements are appropriate to use in certain situations. For example, compare these code samples:
My grandfather served on the <i>U.S.S. Maine</i>.
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. 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.)