Definition and Usage
The <abbr> tag represents an abbreviation or acronym.
When combined with the title attribute, it helps clarify the full meaning of the abbreviated term.
The <abbr> tag comes from the word abbreviation
which means a shortened form of a word or phrase.
The <abbr> tag can be used for the following purposes:
- To clearly indicate the meaning of an abbreviation or acronym
- To emphasize an abbreviation or acronym
- To help search engines recognize the abbreviation or acronym
Using this tag not only improves the accessibility and readability of a web page but also makes the HTML document easier to understand and helps search engines better recognize the content.
Basic Example
In this example, an abbreviation is marked up with the <abbr> element, which uses the title attribute to provide the full term. By using the <abbr> tag along with the title attribute, you not only improve the accessibility and readability of a web page but also make the HTML document easier to understand and help search engines better recognize the content.
Syntax
Using the title Attribute
When combined with the title attribute, the <abbr> tag helps clarify the full meaning of the abbreviated term.
The <abbr> tag supports all global attributes.
However, unlike other tags, the title attribute used with the <abbr> tag has a specific purpose: it must contain a human-readable description or expanded form of the abbreviation or acronym.
Browsers typically display the value of the title attribute as a tooltip when the user hovers over the abbreviation.
Not Using the title Attribute
Use the <abbr> tag without the title attribute when it simply indicates that a word is an abbreviation or acronym without providing an explanation.
Defining Abbreviations with the <dfn> Tag
You can formally define abbreviations or acronyms by using the <abbr> and <dfn> tags together.
Explanation
<dfn> tag represents the term being defined within the content. It is used to clearly indicate that the term is being defined, and must appear only in sentences where both the term and its definition are present.
The <dfn> tag is used to indicate the formal definition of a term, while the <abbr> tag marks the abbreviation itself. Using both tags together allows you to clearly define an abbreviation or acronym within the document, enhancing semantic clarity and improving accessibility.
Usefulness of the <abbr> Tag
- Providing expanded meanings for abbreviations:
When the author wants to clarify the full form of an abbreviation, the
<abbr>tag with thetitleattribute can be used to provide that information. This offers an alternative to including the full term in parentheses inline. - For abbreviations unfamiliar to readers:
If the document includes abbreviations that may not be familiar to the reader, it is recommended to either use the
<abbr>tag with atitleattribute when the term is first introduced, or to include the full form directly in the text. - Semantically annotated abbreviations:
If an abbreviation needs to be semantically identified — for example, for applying specific styles via a stylesheet — the
<abbr>tag can be used without thetitleattribute.
Browser compatibility
| Tag |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
<abbr>
|
2 | 12 | 1 | 4 |
Specifications
| Specification | |
|---|---|
<abbr>
|
HTML Standard #the-abbr-element |