[Skip to the Main Content]

The Definition Title

Or, How to Reinvent an HTML Phrase Element for the Benefit of Universality

Most of my readers have a better understanding of formal English language than that which I use. I’ve used redundant statements in articles or cited Wikipedia pages for larger references when making vague allusions. However, one thing has always bothered me: inline definitions. I do not generally follow links and I'd wager that most site visitors do not either. I wanted an inline definition rollover for Universality which for me includes editorial content which includes slang, vague references and allusions that may be understood by all.

This was the first pun I learned but did not understand until my father explained it to me:

“Two old ladies went for a tramp in the woods but he got away.”

Most readers will understand that “tramp” means a hobo or—these days—a homeless gent. However, the joke arises when “tramp” is first understood to be walking or promenading.

And, that’s where my frustration rose. Web pages offer interactive elements. And, I wanted a simple mechanism to display inline definition.

HTML 4.01 Specification, 9 Text, 9.2 Structured text, 9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM

DFN: Indicates that this is the defining instance of the enclosed term.”

That would work.

And, the funny thing about the “title” attribute: it works on all HTML elements even if not all browsers acknowledge it.

The previous article Shakespeare knew Latin had a malaprop with a homophone between “heals” and “heels” that required an explanation. Or, definition. I wrote my HTML appropriately for my need.

“Time wounds all <dfn title="An unscrupulous person usually male" class="definition">heels</dfn>”.

The definition class is added for styling a different bottom border than what the abbreviation renders. I didn’t like the “title” display and it does not allow enough characters for long definitions, e.g., sixty-five characters in FireFox.

Sweet Titles Finalized by Dunstan Diaz was my selection after perusal of Smashing Magazine’s 40+ Tooltips Scripts With AJAX, JavaScript & CSS because Dunstan was kind enough to add a simple array,

tipElements : ['a','abbr','acronym'], // @Array: Allowable elements that can have the toolTip

However, I didn’t want those elements to have their titles affected by the Javascript —it was shortened, tipElements : ['dfn'], // @Array: Allowable elements that can have the toolTip (which was the single alteration I made to his code).

The style sheet was revised. And, I added cursor: help as another level of differentiation.

I have my inline definitions. Semantic or not. And, it degrades gracefully when Javascript has been shutoff.

I hope these DFN Titles are found useful. And, if I ever write about wordplay and cite L.H.O.O.Q. by Marcel Duchamp, then you’ll know what his joke was.

Sean Fraser posted this on September 18, 2007 08:31 AM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/html/the-definition-title.html
  • furl: http://www.elementary-group-standards.com/html/the-definition-title.html
  • reddit: http://www.elementary-group-standards.com/html/the-definition-title.html


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.

Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus