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
: Thetitle
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:
- Accessibility: The
<abbr>
tag improves accessibility for people using screen readers, as the full form of the abbreviation is read aloud. - User Experience: It helps users understand unfamiliar abbreviations or acronyms by displaying a tooltip with more context.
- 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.