In this section, we will learn what <abbr> element in HTML is and how it works.

Abbreviation in HTML: What is <abbr> (abbreviation) Tag in HTML?

The HTML <abbr> tag stands for abbreviation and we use it when we have a word in a paragraph that represents an abbreviation. The beauty of this HTML element is that it has an attribute named `title` that allows us to put the full form of the abbreviated word in it and then when a user hover the mouse cursor on the abbreviated word, the full form will appear automatically in a tooltip on top or below that abbreviated value.

HTML <abbr> Tag Syntax:

<abbr title = "Full-form-of-the-abbreviation-value "> Abbreviation </abbr>

HTML <abbr> Tag Values

For the title attribute, we put the full form of the abbreviated value.

Of course, for the value in the body of the <abbr> element, we set the word/s that is considered as an abbreviation.

HTML <abbr> Tag Note:

The attribute title is basically a global attribute and is not limited to just the <abbr> element! This means you are free to use it with other HTML elements as well.

Example: abbreviation for HTML

See the Pen ation for HTML by Omid Dehghan (@odchan1) on CodePen.

Output:

Acronym vs Abbreviation

Other than <abbr> element, there’s another HTML element named <acronym> which is used to do the same job as <abbr>. The HTML <acronym> element was introduced before the rise of HTML5 and in the version 5 of HTML, there’s no support for <acronym> element. So for this reason, it is best to stick with <abbr> and use it whenever you need to represent an abbreviation on a page.