The Definition Title

Every technical text reaches a moment where it must introduce a term. Most authors reach for <em> or, worse, a bare <b>, italicize the word, and move on. HTML has a purpose-built element for exactly this, and a companion attribute that promises a tooltip. Used together they are elegant; used carelessly they quietly fail the people who most need them.

Meet the <dfn> element

The <dfn> element marks the defining instance of a term — the one place where you explain what the word means. The paragraph containing it is understood to be the definition. There should be exactly one defining instance per term in a document.

<p>A <dfn>serialization</dfn> is a concrete way of
writing a document down as a stream of characters.</p>

Style it however you like — the default italic is a convention, not a rule. What matters is that you have declared, semantically, “this is where serialization is defined.”

The title attribute link

There is a special convention: if the <dfn> element carries a title attribute, that value is taken as the exact term being defined. This is useful when the visible text and the canonical term differ:

<p>The page dropped into <dfn title="quirks mode">quirks</dfn>,
and the box model reverted to its 1998 behavior.</p>

You can then link other mentions back to the definition with a fragment, giving readers a way to jump to the explanation.

The tooltip temptation — and its caveats

Many authors love that title shows a native tooltip on hover, and use it to stash definitions or abbreviation expansions. It works, but understand its limits before you rely on it:

• No keyboard access. Tooltips appear on mouse hover. Keyboard-only users never see them.
• No touch access. There is no “hover” on a phone; the tip simply does not exist.
• Inconsistent screen-reader support. Some assistive tech ignores title entirely, or requires a verbosity setting that is off by default.
• Ephemeral and unstyleable. You cannot control its appearance, timing, or wrapping.

Treat title as a sprinkle of extra convenience for mouse users — never as the only place a piece of information lives.

Do it accessibly

If a definition matters, put it in the visible text where everyone can read it, and use <dfn> to mark it semantically. For abbreviations, prefer <abbr> with the expansion also spelled out in prose on first use. When you genuinely need an accessible on-focus tooltip, build it with a real element, tabindex, and aria-describedby pointing at visible text — not a lone title. The definition title is a fine tool. Just do not let a tooltip become the load-bearing wall of your content.