HTML <abbr> Abbreviation tag


The <abbr> tag in HTML is used to define an abbreviation or acronym. It provides a way to explain the meaning of a shortened form of a word or phrase by displaying additional information when the user hovers over the abbreviation, typically as a tooltip.

Syntax:

<abbr title="Full Form of the Abbreviation">Abbreviation</abbr>

Attributes:

  • title: The title attribute is used to specify the full form of the abbreviation. When the user hovers over the abbreviation, the full text appears as a tooltip. This attribute is required for the <abbr> tag to provide context to users, especially for accessibility purposes.

Example:

<p><abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>

In this example:

  • The abbreviation WHO is wrapped in the <abbr> tag.
  • The title attribute contains the full form "World Health Organization."
  • When a user hovers over "WHO," the full text ("World Health Organization") will be displayed as a tooltip.

Usefulness of the <abbr> Tag:

  1. Accessibility: The <abbr> tag improves accessibility for people using screen readers, as the full form of the abbreviation is read aloud.
  2. User Experience: It helps users understand unfamiliar abbreviations or acronyms by displaying a tooltip with more context.
  3. SEO: Search engines may benefit from the full form of abbreviations in the title attribute for better indexing and understanding of the content.

Example with Multiple Abbreviations:

<p>The <abbr title="National Aeronautics and Space Administration">NASA</abbr> and the <abbr title="European Space Agency">ESA</abbr> work together on various space missions.</p>

In this example, both NASA and ESA have their full forms displayed in the tooltips.