Sometimes, a particular abbreviation text must be expressed on a web page when the mouse pointer hovers over it. This functionality can be achieved using the HTML <abbr> tag. This tutorial explains how this HTML tag works.

What is HTML Abbr Tag?

The HTML <abbr> tag displays an abbreviation, and its optional title attribute defines an extension or explanation for the abbreviation. The abbreviation tag is beneficial in providing valuable information to web browsers, search engines, and language translation systems. Developers can use this <abbr> tag with an optional "title" attribute, and the text in the title attribute will pop up when the mouse hovers over the content written within the <abbr> tag.


The abbreviation can be written as:

The <abbr title="Indian Premier League">IPL</abbr> was started in 2008.
The IPL was started in 2008.

Use of the Abbr Tag

When developers want to provide an extension or definition outside the flow of the content, they can use <abbr> tag with the appropriate title. When an abbreviation's presence in the content text needs to be semantically cited, then the <abbr> element comes into great use. Users can also use the <abbr> tag in concert with the <dfn> tag to specify explanations for words that are in abbreviations or acronyms forms.


The coding part of HTML with an abbr tag starts with head and title. Then, users can proceed further to the body of the code. Within the body, users can define their abbr tag with some specific heading, and paragraph-wise, they can write the abbr tag's section. An example of <abbr> tag <dfn> to specify explanations is as follows