The semantics behind the DFN tag

In writing the tutorial for my Web design class (middle- and high-school ADD kids, a different perspective!), I found someone using the DFN tag in a way I found useful. Here’s the format:

[highlight=“HTML 4.01 Strict”]
<dfn title=“content displayed in tooltip”>defined term</dfn>

Adding some styling, including `cursor: "help"`, makes this a nifty little technique for the page's content presentation. 

However, apparently this isn't correct, [according to Tommy and Paul]( According to the reference, you should only do this:

[highlight="HTML 4.01 Strict"]
&lt;dfn&gt;defined term&lt;/dfn&gt;

The defined term shows up in italics (or however you wish to style it), and life goes on.

My question(s): Is it semantically inaccurate to use that little title tooltip? (W3C validates it, for what that’s worth.) And, in a purely pragmatic sense, what good is a plain DFN tag anyway? Why not just italicize the defined term, or create a class and style that term the way you want it? Does it have a specific value for screen readers and other assistive devices?

Using the title attribute for a tooltip would be redundant. The correct usage (as I read it) is to ‘tag’ the word or phrase being defined by the text. Thus:

<p>When using unfamiliar terms, one might include the <dfn>definition</dfn>, a concise explanation of the meaning of the word, phrase or symbol.</p>

Typographically, you could use the i or span tag with a title attribuute if you’re not defining the term in the document, but dfn is more semantically specific where you are.



You can use the title attribute to attach a “tooltip” to any of the content of the page where such a tip is appropriate. While it would seldom be needed on the <dfn> tag it is still valid there for the one in a million situation where it is appropriate.

Thanks, guys. Even if it is a page for middle school and high school kids who think clicking on backgrounds for MySpace is “design,” I don’t want to use tags or elements that are semantically inaccurate or invalid, whether they work or not.

Gary, I understand that in theory, you use the DFN tag when you’re setting off a word you are defining in the course of the sentence.

SitePoint veteran <dfn>Gary Turner</dfn> is a veteran Web designer and notorious babe magnet.

However, in functional terms, I don’t see any difference between that and just setting off the defined term in italics or whatever styling you like.

Stephen, I know I can do that with a title attribute; using the tooltip to contain the definition, or a small parenthetical phrase that contains extra, useful information outside the direct flow of the content, does seem sensible to me.

Of course I’m waiting for the Mad Swede to come bust me in the chops for my fast-and-loose approach to HTML semantics. :smiley:

Off Topic:

What’s worse, Mrs. Max will take his side over mine. :lol:

I agree there’s a lack of “functional” difference. The tag seems a bit sloppy for use in machine parsing. But consider the following:

<div style="padding-left: 40px">
  <div style="display: list-item; list-style-type: disc;">item </div>
  <div style="display: list-item; list-style-type: disc;">item </div>
  <div style="display: list-item; list-style-type: disc;">item </div>

That’s completely valid, and looks every bit as we expect a list to look. It is also completely non-semantic. It would work just fine, thank you, but there are better tags to mark it. Likewise there is the dfn for those times it is called for.

Off Topic:

Your statement about me is only half true. I am not a veteran web designer (in the graphic sense).



You’re right, of course. Icky code you cited: brings up bad memories of my stint at Cisco, where I had to clean up hundreds of pages of HTML generated by Front Page. An early version of Front Page. :sick:

:rofl: I always appreciate a dry sense of humor.

The DFN is one of those ambiguous elements and can be interpreted both ways with regards to the supportive ‘title’ attribute. Though I think the idea was; it is more-or-less standalone.

Usually it is not needed or is better explained using a different method. I think it will just confuse some of the kids. Typically a supportive ‘title’ around a well-constructed sentence/description will do.

I doubt “Gray Turner” would warrant a DFN as it’s considered a person’s name and you could have explained him equally well without the DFN and possibly additional supportive text.

Wait no more! :smiley:

The dfn element type indicates the defining instance of a term with which the reader may not be expected to be familiar. It is a long-standing typographic convention, especially in textbooks and scientific texts, to denote this by rendering the term in italics. That way the reader gets visual confirmation that this is where the term first appears and that he or she doesn’t have to feel bad for not knowing what it means.

Generally, of course, the meaning of the term is explained very close to the marked-up instance.

The belief that you should use a title for it probably stems from a fairly common misconception that dfn means ‘definition’ and is similar to abbr or acronym. (But even for those, the meaning should be spelled out in plain text near the first occurrence, not hidden in a title attribute.)

Here’s a semi-plausible example of how dfn can be used:

When dimensions for an absolutely positioned element is expressed in per cents, they are relative to the element’s <dfn>containing block</dfn>, which is the nearest positioned ancestor.


That’s because she’s a very bright lady. Unlike you. You’re no lady at all! :D[/ot]

LOL, Tommy, she’s already told me that if I argue with you, she’ll clop me in the chops. (And how bright was she…she married me, after all!) Besides, you guys have been correct the entire time. When I teach this concept in the English classroom, I teach the kids to put quotes around the term being introduced (since it’s tough to write italics by hand, and underlining is saved for titles of relatively long works and such). Same semantic idea. I found this technique used on another site and though it works in the various browsers (even IE6), wasn’t sure if it was kosher. Apparently it isn’t. I’ve transformed the usage to just hanging the title info off a span/class, and it works just as well.

I’m still wondering if speech readers and such treat DFN-tagged text any differently.

Robert, that’s the way I’ve looked at it.

:slight_smile: Not getting that far in the weeds with the kids, I was using the DFN tag in the Web site containing the class tutorial, not teaching it to them. That would drive them nuts. One of the beginning lessons in “Head First into HTML” gets bogged down in <q> and <cite> tags; never understood why they bothered with those tags so early on in their tutorial, when they could have been diving into larger and more important concepts.

Tommy, what you’ve said has presented me with a real issue in terms of semantic correctness then. For the case of a word definition what would you say is the semantically correct element to use (inline)? You’ll probably say never but I’ve always thought that the way people browse these days it makes better sense to declare definitions on the point of the word. I’ve always known that DFN indicates the defining instance of a term in HTML to which the reader not necessarily understand it’s meaning however I tend to use the element also for providing word definitions (the title attribute is technically valid) because a SPAN has no real semantic value in stating that the content provides contextual meaning which is important to the end user and ABBR / ACRONYM only make logical sense (in terms of grammatical correctness) in cases where a word has been shortened or it has an alternative meaning which can be associated with it.

While the misconception that DFN is definition is that, I’ve always run along with it as even though it’s not in the specification, it’s widely accepted to potentially define that word. It’s almost re-purposing the element for a secondary defined meaning in the sense that it’s the notifier for the first term of a word, unless the title attribute is provided (with visual accompaniment to accent a tooltip exists to signify an underlying meaning not expressed elsewhere). I know this is all about being semantically correct but I’ve always felt in terms of accessibility and usability that following the expected convention of “term” with a hover description of it’s contextual meaning better accents the justification for use. While in existing conventions, accenting that the first instance of a term has arrived, the way most users browse they expect definitions to terms immediately rather than progressively within the structure of the content (perhaps it’s down to the way we scan rather than read at length these days). I’ve always recommended the use of the DFN element with a title attribute for definitions to provide “hover meanings” to words (as long as they are strictly defined as having such a convention - for example with a dotted rather than clean underline and the “help” cursor to notify the roll-over of an instance of a tooltip).

Even the brightest make the occasional mistake. :stuck_out_tongue:

I can’t say, unless you explain to me what ‘word definition’ means and how it differs from a defining instance. An actual definition of a term should be in a <dl> (can’t be inline, though).

When you introduce a new, important term, mark it up with <dfn> and provide an explanation – or definition, if you like – alongside of it.

Should you feel the need to provide reminders later on, in case the reader has the attention span of a goldfish and needs to be told again every three minutes, you can use a <span title="...">. Using <dfn> again for the same term would be incorrect, since you can’t have more than one defining instance for a word. Once it’s defined it stays defined.

Note that the title attribute is by no means required for <abbr> and <acronym> either. Not even the first time. If the reader cannot be expected to know what the abbreviation means, then you should provide the expansion in plain text where it is first used. Using title attributes for subsequent occurrences is very much optional, and usually only leads to bloat.

The purpose of <abbr> and <acronym> is not to provide the expansion in a tool-tip; it is to signal that the content is an abbreviated form of a word or phrase. Tool-tips are only meant for information that may be of interest to some readers, but is not important in any way for the understanding of the content per se. Not all user agents support title attributes, and most don’t give any visual clue that there is an advisory title available. Finally, these things are virtually inaccessible to users who navigate by keyboard, since contemporary UAs show them only when the mouse pointer hovers over the element.

See, the thing is, in most documents I don’t like the idea of having as list of terms and their meanings proceeding or post the body of content as it seems to defy the readability of information as when people scan documents, to look elsewhere for an explanation of something would break the natural reading flow. I along with many other people scan documents and upon finding a word that requires a strict definition it makes better sense to me to offer the “extra value” in the form of a tooltip (along with the conventional term explanation offered in the paragraph). I should probably say up-front that I only use the DFN element on the first instance of the term and provide the meaning of that as specified in the W3C spec inline within the paragraph. I just use the title attribute to give it that extra bit of value. :slight_smile:

A UX Designer’s primary job role is to ensure that the end-user’s experience has been optimized, ensuring that a website is as accessible and usable as possible.

UX Title = “The end-user should be the main justification for design decisions!” <— This is an example of what I mean… just adding extra contextual value. :slight_smile: