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”.
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:
Emphasizes text. Usually rendered as italic.
Please do <em>not</em> feed the monkeys.
Strongly emphasizes text. Usually rendered as bold.
<strong>WARNING:</strong> Never feed the monkeys under any circumstances.
Indicates a citation or reference. Usually rendered as italic.
For more information, please refer to <cite>The Dangers of Monkey Feeding, Vol 2</cite>.
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.
indicates an acronym, such as RADAR (RAdio Detection And Ranging); also provides a
titleattribute 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
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.
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
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
The key point to remember is that a
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
1. This is a paragraph with a section of
<em>emphasized text</em> inside of it.
2. This is a section of emphasized text with
<p>a paragraph</p> inside of it.
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
Physical style elements specify a particular font change.
For example, to make text bold, you can mark it off with the
list of available physical style elements includes:
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.
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>.
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.
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
“something strongly emphasized,” while the physical style
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
sup elements are appropriate to
use in certain situations. For example, compare these code
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
is all that wonderful, but
em is just flatly
wrong. It would be nice if we had a
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
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
Distler for pointing this one out.)