120 Chapter 4
Defining a Term
element marks the one place in
your document that you define a term. Sub-
sequent uses of the term are not marked.
only around the term you’re
defining, not around the definition
It’s important where you place the
relation to its definition. HTML5 states,
“The paragraph, description list group,
or section that is the nearest ancestor of
element must also contain the
definition(s) for the term given by the
element.” This means that the
definition should be in proximity to each
other. This is the case in both
example given in the third tip; the
its definition are in the same paragraph.
To mark the defining
instance of a term:
2. Type the term you wish to define.
You can also use dfn in a definition list
(the dl element). See Chapter 15.
If you want to direct users to the defining
instance of a term, you can add an id to the
dfn and link to it from other points in the site.
dfn may also enclose another phras-
ingelement like abbr, when appropriate.
For example, <p>A <dfn><abbr title=
"Junior">Jr.</abbr></dfn> is a son with
the same full name as his father.</p>.
HTML5 says that if you use the optional
title attribute on a dfn, it should have the
same value as the dfn term. As in the previous
tip, if you nest a single abbr in dfn and the
dfn has no text node of its own, the optional
title should be on the abbr only.
<p>The contestant was asked to spell
➝"pleonasm." She requested the definition
➝and was told that <dfn>pleonasm</dfn>
➝means "a redundant word or expression"
➝(Ref: <cite><a href=" http://dictionary.
Note that although pleonasm appears twice
in the example,
marks the second one only,
because that’s when I defined the term (that is,
it’s the defining instance). Similarly, if I were to
use pleonasm subsequently in the document,
I wouldn’t wrap it in
because I’ve already
defined it. By default, browsers style
differently than normal text
. Also, you don’t
have to use the
element each time you use
, just when you reference a source.
element renders in italics by default in
some browsers (Firefox, in this case), just like
but not in Webkit-based browsers such as Safari
and Chrome. You can make them consistent by
to your style
sheet (see Chapters 8 and 10).