This article deals with the abbr tag in HTML. This is also a very easy topic and it is easy to learn. Let’s dive into the topic. Come on!
Table of Contents
Introduction
Abbr tag is nothing but the abbreviation tag. What comes into mind when we hear the word abbreviation? Most of us come up with the term “short form”. So this tag basically is used for abbreviating a word.
This tag is an alternative for the <acronym> which is no longer in use
Definition
The <abbr> tag is used for abbreviating some short forms of a word. It represents a series of letters. The abbreviation provides useful information to the browsers, translation systems, and search-engines.
Syntax
This tag’s syntax is very easy. Just write the word <abbr>, you get the syntax.
<abbr attribute/title> ..(Short form) </abbr>
Attributes
Global attributes
This tag supports global attributes. Global attributes are attributes which can be used throughout the code.
Specific attributes
<abbr> tag has no specific attributes.
Specification
Now let’s see about the specifications and its related one.
Display | Inline |
Tag | Start and End tag is mandatory |
Usage | Semantic or textual |
Default styling
This tag is mostly used for author convince. But the styling differs from one browser to another.
- Bowsers like Internet Explorer doesn’t style differently. It styles like an ordinary <span> element.
- And, some browsers like Chrome, Safari, Opera add some dotted lines to it.
- Sometimes while adding the dotted lines, caps may be added to it too. To remove this add font-variant: none. CSS takes care of this issue.
Browser Support
The browsers which supports this tag are,
- Safari
- Chrome
- Opera
- Internet Explorer
- Firefox
- Edge
This tag provides support for the above browsers for both mobile and PC versions.
Use Cases
- When you want to provide the expansion of a word but outside the document flow, you can use this tag.
- When you want to tell the user the expansion, use this tag along with the title appropriately.
- Use can use the <abbr> tag along with <dfn> to define the abbreviation. That is when you want to provide a definition for the word.
Examples
Now let’s see some examples for better understanding
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Abbreviation tag</title>
</head>
<body>
<h2>Abbreviation tag without title attribute</h2>
<p><abbr title="World Health Organisation">WHO</abbr> puts in a lot of effort for the world. </p>
</body>
</html>
When you run the code, you will be able to see the dotted lines below. That is the styling of the browser.
Output


Example 2
What happens if we don’t use the title attributes? Let’s find out.
<!DOCTYPE html>
<html>
<head>
<title>Abbreviation tag</title>
</head>
<body>
<h2>Abbreviation tag without title attribute</h2>
<p><abbr>WHO</abbr> puts in a lot of effort for the world. </p>
</body>
</html>
Result
So now we see that even if we move the mouse over the word, we don’t get the expansion. This is why we use the title attribute. So it is important that you use the title attribute.
FAQ
Abbr tag is nothing but the tag which is used for providing expansion.
abbr tag provides expansion for a word when the mouse is hovered around it.
Conclusion
So in this article, we have learnt about the abbr tag in HTML which is a very basic one. We have also discussed its styling and its specifications. We have also learnt an important point that <abbr> tag is the substitution for <acronym> tag. Keep practicing these tags to be confident and happy coding!