Abbr tag in HTML

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!

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.

DisplayInline
TagStart and End tag is mandatory
UsageSemantic or textual
Basic specification
Content Category
Palpable content, Flow content, Phrasing content
Permitted ContentPhrasing content
Implicit ARIA roleNo role
DOM interfaceHTML element
Permitted ParentsAny element accepting phrasing content
Permitted ARIA roleAny 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,

  1. Safari
  2. Chrome
  3. Opera
  4. Internet Explorer
  5. Firefox
  6. 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

Output when the mouse is not hovered
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!

  1. Map and Area Tag In HTML

Leave a Comment

Your email address will not be published. Required fields are marked *