Introduction to HTML abbr Tag

HTML 5 has interesting features that make designing HTML web pages simpler using minimal writing of code. It provides a rich set of interesting tags to design web elements. One such tag is useful, which is known as <abbr> tag. This <abbr> tag is used to define and display an abbreviation in the one go. The HTML abbr tag will allow us to define the full form of abbreviations or acronyms, and the browser will display the short-form version of letters normally on a web page, but upon hovering over those abbreviations, the browser will display the full form of that acronym automatically.

Syntax of HTML abbr Tag

The <abbr> tag is generally used along with the <title> attribute. As the title tag is used to define the title of the document, the title, when used with the <abbr> tag, becomes an attribute and has a special meaning to it. The title will contain the human-readable title or the full form of an acronym. The <abbr> tag displays the full form on hovering to the user and makes it simplified to define the description. This information is much more useful to browsers, search engines and assistive systems like the translation system. Below is the syntax of the abbr tag,

Normal abbr Tag:

< abbr > PFA </ abbr >

This will only display simple text without any meaning. Suppose we want to use assign full form for the above abbreviation, i.e. PFA, then <title> attribute is used,

abbr Tag with Title Tag:

<abbr title = "Please Find Attached" > PFA </abbr>

Here, we have defined the display title as short-form, but at the same time, we have defined the full form of it using the <abbr> tag along with the <title> tag. The <abbr> tag comes as pair, so there will always be a closing </abbr> tag available.

Attributes: As we have seen in the syntax, the title tag, when used along with the <abbr> tag, becomes an attribute and assigns special functionality to it. Otherwise, there are no more specific tags available to use with the <abbr> tag, but this tag <abbr> supports the global attributes and event attributes that are available by default in HTML.

Examples to Implement HTML abbr Tag

Below are the examples of implementing the HTML abbr tag: Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

Example #1

In this example, we can see the Simple abbr without a Title Tag.

Code:

<!DOCTYPE html> <html> <head> <title> abbr tag in HTML </title> <style> body { text-align: left ; } </style> </head> <body> <abbr > PFA </abbr> </body> </html>

Output: will be a simple text as below,

Example #2

In this example, we can see the abbr With a Title Tag.

Code:

<!DOCTYPE html> <html> <head> <title> abbr tag in HTML </title> <style> body { text-align: left ; } </style> </head> <body> <abbr title = "Please Find Attached" > PFA </abbr> </body> </html>

Output: will be an acronym with a dotted underline.

If we try to hover over this, it will display the title that we have given in a similar way to the tooltip.

Example #3

Here, we have used the CSS styling element font style as italic over the <abbr> tag.

Code:

<!DOCTYPE html> <html> <head> <title> abbr tag in HTML </title> <style> body { text-align: left ; } p { font-size: x-large ; } abbr { font-style: italic ; } </style> </head> <body> <p> while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used </p> </body> </html>

Output:

Example #4

Let’s use some more CSS styling elements over <abbr> tag.

Code:

<!DOCTYPE html> <html> <head> <title> abbr tag in HTML </title> <style> body { text-align: left ; } abbr { font-style: italic ; color: red ; font-weight: bold ; } </style> </head> <body> <p> while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used </p> </body> </html>

Output:

Here, we have made our acronym as bold and red using the CSS styling elements.

Example #5

Let’s modify the same example to add more styling and designing.

Code:

<!DOCTYPE html> <html> <head> <title> abbr tag in HTML </title> <style> body { text-align: left ; } p { font-size: x-large ; background-color: blanchedalmond ; padding-top: 25px ; padding-bottom: 25px ; text-align: center ; border: 1px solid cadetblue ; border-radius: 10px ; } abbr { font-style: italic ; color: red ; font-weight: bold ; } </style> </head> <body> <p> while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used </p> </body> </html>

Output:

In each of the examples above, try to hover above the acronym we have used, i.e. PFA, and see how the browser will display the title we have assigned to it.

Important Points to Remember

The <abbr> tag is supported by almost all browsers, including Google Chrome, Internet Explorer, Safari, Firefox, Opera, etc. The output produced by all the browsers may differ in some cases, but the result is the same.
As there are no specific attributes available with the <abbr> tag, we will see how can we stylize the attribute (using global attributes available) in the next examples. The default styling to display this element is display: inline, and it may vary from browser to browser.
The <abbr> tag can be used to provide the user with the full form or while definition in specific content or maybe in case of styling the document. It is not compulsory to always use the <abbr> tag.
The <title> attribute is used to provide full information or the full form of the specified acronym in the <abbr> tag. The <title> attribute is optional, and it will be used in the starting tag of the <abbr> tag.
There used to be a <acronym> tag before HTML 5 to define the abbreviations or acronyms, but it is deprecated from HTML 5 and should not be used.

Conclusion

So, we have seen the <abbr> tag, which is introduced in HTML 5. This tag provided the way to define the abbreviations or acronyms and display their titles or detailed information in one go. We have seen multiple examples of <abbr> attribute. There are no such special attributes available with this tag.

Introduction to HTML abbr Tag