#30DaysofHTML Day 7: <abbr>
What does that TLA* mean?
*TLA: three-letter acronym.
<abbr> is for abbreviations or acronyms. If you're using them in your writing, well, you should define them. Your teacher told you this in school, and we're telling you again for your HTML.
Unfortunately, <abbr> does not help you with creating good acronyms or abbreviations.
How <abbr> works
A good web starts with well-written content. Erika and Jen speak English in the United States, and this is our bias in the below advice. Modify the below advice to fit with grammar rules and conventions for your language and country.
✅ If you learned to write papers in the US, you know that the first time you use an acronym or abbreviation, you should define it, unless it's extremely well known.
<p>We are excited to see where NASA takes us next, given their many successes on the Moon and Mars.</p> To a US-based audience, we are so familiar with NASA, we may not know exactly what NASA stands for (or care, to be honest). However, it is an acronym, and we can mark it up as such:
<p>We are excited to see where <abbr>NASA</abbr> takes us next, given their many successes on the Moon and Mars.</p> Yeah, not super helpful. We already guessed it was an abbreviation or acronym of some kind, but we still don't know what it stands for.
✅ If you want to communicate the words behind the NASA acronym, there are two possibilities. We like this methodology, which combines good English writing practices with HTML:
<p>We are excited to see where the <dfn id="NASA">National Aeronautics and Space Administration</dfn> (<abbr title="National Aeronautics and Space Administration">NASA</abbr>) takes us next, given their many successes on the Moon and Mars.</p> See how we combine <dfn>, which defines the abbreviation, with <abbr>? The ID in <dfn> may be used to link to that definition later in the document. (See Day 4 for details.)
The title attribute in <abbr> also tells us what the NASA acronym means, but the meaning is hidden. You may have seen this show up as a dotted line in some browsers, with a tooltip that appears when one hovers over the link. That's nice, but now one must do some work to see what the abbreviation means, rather than reading it in the sentence. Also, what happens if you're on a device that doesn't hover? That situation is nicely addressed above through content and markup.
However, if you're working with an abbreviation or acronym that is well-known, and not many people might need help with knowing what this is, you may leave the definition in the title attribute for the <abbr> element.**
<p>We are excited to see where <abbr title="National Aeronautics and Space Administration">NASA</abbr> takes us next, given their many successes on the Moon and Mars.</p> **Many of Jen’s current and former students now hear her voice in their heads: “Just because you can doesn’t mean you should…”
Common misconceptions
Deprecated <acronym> element
⛔️ Older HTML specifications included a separate <acronym> element, which is now deprecated. While there is a difference between acronyms and abbreviations, developers aren't that picky about the semantic difference.
Differences in display across browsers
⛔️ Some of these older browsers (IE in particular) don't style <abbr> the same way that our favorite browsers do (a dotted underline plus tooltip). As always, check across browsers for consistency in styling.
Don't go crazy with <abbr>
✅ Even the specifications state that not every instance of an abbreviation or acronym requires an <abbr> tag. Consider that Dr. is an abbreviation for "doctor" - would you seriously mark that up every time it occurs in medical documentation? We think not. Apply <abbr> judiciously. Don't go bananas.
Commonly used attributes
We described the title attribute in detail earlier:
<abbr title="National Aeronautics and Space Administration">NASA</abbr> The title attribute, when associated with the <abbr> element, must contain the definition of the acronym or abbreviation and nothing else.
<abbr> demo
🖥 View the <abbr> demo on CodePen.
Details and Definitions Unit Challenge
👩🏽💻 With that, we close our second unit on Details and Definitions!
🪄🧩 Take our Unit Challenge to practice use of everything we’ve learned so far, especially <dfn>, description lists, <details> and <summary>, and <abbr>. Fork the pen, work the problem, and post your answer in our discussion.