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!
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
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.
This tag’s syntax is very easy. Just write the word <abbr>, you get the syntax.
<abbr attribute/title> ..(Short form) </abbr>
This tag supports global attributes. Global attributes are attributes which can be used throughout the code.
<abbr> tag has no specific attributes.
Now let’s see about the specifications and its related one.
|Tag||Start and End tag is mandatory|
|Usage||Semantic or textual|
Palpable content, Flow content, Phrasing content
|Permitted Content||Phrasing content|
|Implicit ARIA role||No role|
|DOM interface||HTML element|
|Permitted Parents||Any element accepting phrasing content|
|Permitted ARIA role||Any role|
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.
The browsers which supports this tag are,
- Internet Explorer
This tag provides support for the above browsers for both mobile and PC versions.
- 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.
Now let’s see some examples for better understanding
<!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.
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>
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.
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.
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!