HTML5 <abbr> Tag

The HTML <abbr> tag is used to represent an abbreviation. It can also optionally provide a full description for the abbreviation. You can use the title attribute for this tag to provide the full description of the abbreviation. However, the attribute must not contain anything else.

Both the start and end tags are required for this element. The only content permitted inside this element is phrasing content. This also means that the parent of the <abbr> tag can only be those elements that accept phrasing content.

The <abbr> tag is displayed as an inline element by default. However, rest of the style rules will vary from one browser to another. Some browsers, like Internet Explorer, style it like the <span> element. Other browsers, like Opera and Firefox add a dotted underline to the content of the element. A few browsers will both add a dotted underline and put the abbreviation in small caps. To avoid this styling, you should consider adding something like font-variant: none in your CSS.

The following style is applied to this element by default:

abbr {
  display: inline;
}

Here is a basic example of using this tag:

<abbr title="Hypertext Markup Language">HTML</abbr>

Attributes

title

You can use the title attribute to specify the full description of the abbreviation. Many user agents will present this description as a tooltip.

Examples

See the Pen HTML abbr Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <abbr> element on MDN.
  2. You can also read the HTML <abbr> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top