#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 include title and id, as explained earlier.
🖥 View the <dfn> demo on CodePen.
Challenge: Using <dfn>
More information and examples