ABBR vs DFN vs ACRONYM In HTML – Quick Examples

Welcome to a quick tutorial on how to use the <abbr>, <dfn>, and <acronym> HTML tags. With the introduction of HTML5, there have been additions and changes to quite a number of “confusing” semantic tags. In particular, we will address abbreviation, definition, and acronym in this guide:

  • The  HTML <abbr> tag is used to denote an abbreviation, and we can add a title property to describe the full term. For example, <abbr title="International Organization for Standardization">ISO</abbr>
  • While the definition tag <dfn> is used to indicate the subject of a given phrase. E.g. <p>The <dfn>Nucleus</dfn> is center part of a cell.</p>
  • Lastly, the <acronym> HTML tag is similar to abbreviation, but is now obsolete and should not be used anymore.

That should clear things up, but read on if you need more actual examples.

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Semantic Tags Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

THE SEMANTIC TAGS

All right, let us now touch more on the HTML abbreviation, acronym, and definition tags.

 

1) HTML ABBREVIATION TAG

1-abbreviation.html
<p>
  An <abbr title="Extraterrestrial">ET</abbr> has been reportedly
  thrown out of a <abbr title="Unknown Flying Object">UFO</abbr>.
</p>

Yep, that is essentially everything to the abbreviation tag, and it should be self-explanatory. All we need is to wrap an abbreviation in the <abbr> tag and use the title property to add the full description. But some of you curious code ninjas may be thinking – What if we miss out the title property? Are they really necessary?

Well, there are actually no hard rules saying that we need to add the title… But it is good to add nonetheless, it will help both people and search engines to understand which abbreviation you are referring to.

 

2) HTML DEFINITION TAG

2-definition.html
<p>
  <dfn>Humans</dfn> are bipedal creatures that walk the surface of Earth.
  Otherwise known as homo sapiens.
</p>

This example should have made things Captain Obvious, the definition <dfn> tag highlights which is the subject of the paragraph. Or think of it in the opposite way – “This entire paragraph is describing the specified term”.

 

 

3) ABBREVIATION & DEFINITION

3-abbr-dfn.html
<p>
  <dfn><abbr title="Model View Controller">MVC</abbr></dfn>
  is a software design pattern commonly used for developing user interfaces 
  which divides the related program logic into three interconnected elements.
  - Wikipedia
</p>

Lastly, take note that the abbreviation <abbr> and definition <dfn> can be used together. In the above example, MVC is an abbreviation, and it is also the subject of the paragraph.

 

4) THE ACRONYM TAG

<acronym title="Extraterrestrial">ET</acronym>

Yes, it’s almost the same and I personally call it the outdated abbreviation tag. As in the introduction snippet, this has been deprecated. Don’t use it anymore.

 

 

WHAT ARE THESE TAGS USED FOR EXACTLY?

Now that we are done with the examples, I think it is worthwhile to add that the <abbr> and <dfn> tags fall under a category called “semantic tags”. In simple terms, these tags are used to highlight the “meaning of things”. But personally, I don’t think these tags are useful for humans. It is more for helping search engines figure out what the contents are all about.

 

DO THESE TAGS HAVE ANY EFFECTS ON SEO AT ALL?

For you code ninjas who are into search engine optimization (SEO), you may be wondering if these tags do any good at all. No search engine engineers have spoken up on the matter, no “SEO gurus” have spoken up in-depth as well. So this is just based on my own observations and experience after writing hundreds of blog posts:

  • My blog posts with heavy technical abbreviations ranked just fine, without using any <abbr> and <dfn> tags. For example – MVC, AJAX, SEO, REST, SOAP, API, etc…
  • My strategy is to mention the full term once, then use the abbreviation throughout the rest. For example, Model-View-Controller (MVC).
  • Search engines seem to understand all of these terms well enough and know what the article is referring to.

So in conclusion, the <abbr> and <dfn> tags don’t seem to contribute to the search rankings at all. But don’t get me wrong, since the developers came up with it, then they must serve a purpose. If you want to adopt it, just use the tag once in the beginning, and that’s it. Don’t have to religiously tag every instance.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

HTML Abbreviation and Definition (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *