<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
📚 CSS-Tricks: HTML elements, unite! The Voltron-like powers of combining elements
Nice job, Farazuddin! 🔥🔥🔥🎉🎉🎉 Everything looks good here EXCEPT you're missing one > at the end of your <a> tag on line 17 and a </cite> (you have <cite>). The markup looks great, though! Thanks so much for sharing 😁 👍 ❤️
https://codepen.io/farazxr/pen/gOmeNZL
My Day-4 Challenge.
It would be amazing if somebody/Jen checks it out😅