HTML abbr Tag: How Abbreviations Work with Examples

The abbr tag refers to an abbreviation in HTML. It helps you save space and improve accessibility. The screen readers can say the full meaning.

Understand the <abbr> Tag in HTML

The <abbr> tag marks a short form of a longer phrase. Browsers show a tooltip when users hover over it.

Here is the tag:

<abbr title="Full Phrase">Short</abbr>

The element holds the short form. The “title” attribute stores the full phrase. The browser reads the short form. On hover, it shows the title value.

The title attribute explains the meaning. It gives more context. It also supports screen readers. This helps users understand the short form.

Here is an example:

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

This shows “HTML” with a tooltip. The tooltip displays the full phrase.

Use it for short forms of technical terms. Use it for names of systems or standards. Do not use it for every word. Use it only when the full phrase adds clarity.

How to Style the <abbr> Tag in HTML

You can style it like any other HTML tag. Use CSS rules to change how it looks. You can underline it andchange the color. You can add a dotted border.

<style>
  abbr {
    border-bottom: 1px dotted black;
    cursor: help;
  }
</style>

This adds a dotted line under the abbreviation. The mouse shows a help icon.

<style>
  abbr:hover {
    color: red;
  }
</style>

This changes the text color when the user hovers over the abbreviation.

In the first style rule, the abbreviation gets a visual cue. It looks different from normal text. In the second, the hover style gives feedback to the user.

Browser Support for <abbr>

All modern browsers support the tag. It works in both desktop and mobile versions. Older browsers also support it.

• Chrome: 1 and above
• Firefox: 1 and above
• Safari: 1 and above
• Edge: 12 and above
• Opera: 7 and above
• Internet Explorer: 6 and above

Examples of the <abbr> Tag in HTML

Abbreviation with Tooltip:

<abbr title="World Health Organization">WHO</abbr>

This shows the short form “WHO”. The user hovers to see “World Health Organization”.

Styled Abbreviation:

<style>
  abbr {
    text-decoration: underline dotted;
    color: blue;
  }
</style>
<abbr title="Central Processing Unit">CPU</abbr>

This uses underline and color to highlight the abbreviation. The title gives the full meaning.

Abbreviation with JavaScript Interaction:

<abbr id="term" title="Application Programming Interface">API</abbr>
<script>
  document.getElementById("term").addEventListener("click", function() {
    alert(this.title);
  });
</script>

This adds a click event to the abbreviation. The script shows the full form in an alert.

Abbreviation in a Table:

<table>
  <tr><th>Term</th><th>Meaning</th></tr>
  <tr><td><abbr title="Cascading Style Sheets">CSS</abbr></td><td>Design rules for HTML</td></tr>
</table>

This places the abbreviation inside a table. The user hovers to see the full phrase.

Wrapping Up

In this article, you learned what the tag does and how it works in practice. You also saw how to style it and check browser support. Here is a quick recap:

• The tag marks abbreviations.
• The title attribute holds the full form.
• Browsers show the full form as a tooltip.
• You can style it with CSS.
• It works in all major browsers.

FAQs

<abbr title="United Nations Educational, Scientific and Cultural Organization">UNESCO</abbr>

abbr {
  color: green;
  border-bottom: 1px dashed gray;
}

Similar Reads