Definition Tag


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!)

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

Common attributes

Common attributes include title and id, as explained earlier.

<dfn> demo

🖥 View the <dfn> demo on CodePen.

View the CodePen example

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.

Take the CodePen Challenge

More information and examples

📚 MDN: <dfn>

📚 WHATWG: <dfn>

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

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
CloudFest 2021 In Review

CloudFest is an international Cloud Computing and Webhosting event drawing thousands of attendees from more than 70 countries. It was decided to cancel the 2020

Read More »