Abbr tag in HTML | What This abbr Tag Do

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

Basic specification

Content Category	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

Relevant specifications

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>

Run the code here

When you run the code, you will be able to see the dotted lines below. That is the styling of the browser.

Output

abbr tag in HTML — Result when the mouse is hovered

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>

Run the code here

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

What is abbr tag in HTML?

Abbr tag is nothing but the tag which is used for providing expansion.

What does abbr tag do?

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!

Map and Area Tag In HTML