#30DaysofHTML Day 4: < dfn>

Define your terms

<dfn> is used to indicate the term being defined within the context of a definition phrase or sentence.

That means we'll look to the nearest or surrounding <p>, <dd> within a definition list (tomorrow!), or <section> element (Day 18) for the definition of the term.

MDN and WHATWG agree on the usage, and compared to some of the tags we've seen, <dfn> is straightforward! Whew. Because we are exhausted after <cite>.

Ways to use <dfn>

The most obvious usage is to indicate the term being described within the context of the phrase or sentence. Here, "Godzilla" is defined by the rest of the paragraph.

<p>My son thinks he is <dfn>Godzilla</dfn>, who is generally depicted as an enormous, violent, prehistoric sea monster awakened and empowered by nuclear radiation. It's true, there are similarities.</p> 

If we mention the definition again later in our content, we can add a bookmark link to jump back to the term nearest to the definition.

<p>He is not as enamored with <dfn id="kong">King Kong</dfn> who resembles an enormous gorilla-like ape that has appeared in various media since 1933. </p> 

...

<p>Complaints about <a href="#kong">Kong</a> include how he has no atomic fire breath.</p> 

One common -- and useful -- combination is to pair <dfn> with <abbr> (the abbreviation tag, appearing in an email near you on day 7) in order to define a term along with an acronym.

<p><dfn><abbr title="Massive Unidentified Terrestrial Organism">MUTO</abbr></dfn> refers to a species of giant monsters that first appeared in <cite>Godzilla</cite> (2014) and <cite>Godzilla: King of the Monsters</cite> (2019). In <cite>Godzilla vs. Kong</cite> (2021), the enemy has changed.</p> 

Little known facts about <dfn>

Both MDN and WHATWG say that if <dfn> has a title attribute, the attribute MUST contain only the term and no other text. Our thought is that this could be for a nickname, rather than an abbreviation, otherwise, it's unclear in the documentation what the difference is!

<p>In the Godzilla-verse, <dfn title="Ghidorah">Monster Zero</dfn> is a giant extraterrestrial three-headed dragon-like monster.</p> 

If you are using a <dl> (Day 5, tomorrow!) as a DEFINITION list, then it's acceptable and perhaps even desirable to double tag the term with <dfn>. (Spoiler alert: <dl> may also be a description list!)

<dl>
   <dt><dfn>Monster Island</dfn></dt>
   <dd>Island where Godzilla lives</dd>
   <dt><dfn>Skull Island</dfn></dt>
   <dd>Island where Kong lives</dd>
</dl>

Common attributes

Common attributes include title and id, as explained earlier.

<dfn> demo

🖥 View the <dfn> demo on CodePen.

Challenge: Using <dfn>

👩🏽‍💻 Try today’s CodePen Challenge about the use of <dfn>. When you’ve completed it, post your answer in our discussion in Substack.

More information and examples

📚 MDN: <dfn>

📚 WHATWG: <dfn>

📚 CSS-Tricks: HTML elements, unite! The Voltron-like powers of combining elements