HTML: <abbr> tag
This HTML tutorial explains how to use the HTML element called the <abbr> tag with syntax and examples.
Description
The HTML <abbr> tag defines an abbreviation or acronym in an HTML document. An example of an abbreviation is Mr. which is short for Mister. An example of an acronym is TOTN which stands for Tech On The Net. This tag is also commonly referred to as the <abbr> element.
Syntax
In HTML, the syntax for the <abbr> tag is:
<body>
<p><abbr>TOTN</abbr> is an acronym.</p>
</body>
Or, the <abbr> tag can be defined using the optional title attribute as follows:
<body>
<p><abbr title="Tech On The Net">TOTN</abbr> is an acronym.</p>
</body>
When you add the title attribute to the <abbr> tag, the title may be displayed as a tooltip when you hover over the element.
Sample Output
Attributes
Only the Global Attributes apply to the <abbr> tag. There are no attributes that are specific to the <abbr> tag.
Note
- The HTML <abbr> element is found within the <body> tag.
- The title attribute is optional but if included must contain a description of the abbreviation that is human readable. This title will be displayed as a tooltip on some browsers when you hover over it.
- Some browsers may apply special styling to the <abbr> tag such as adding a dotted underline or translating the text to small caps.
Browser Compatibility
The <abbr> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <abbr> tag below, exploring examples of how to use the <abbr> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML5 Document
If you created a new web page in HTML5, your <abbr> tag might look like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Did you know that <abbr>HTML</abbr> stands for HyperText Markup Language?</p>
</body>
</html>
In this HTML5 Document example, we have defined the acronym HTML using the <abbr> tag.
HTML 4.01 Transitional Document
If you created a new web page in HTML 4.01 Transitional, your <abbr> tag might look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Did you know that <abbr>HTML</abbr> stands for HyperText Markup Language?</p>
</body>
</html>
In this HTML 4.01 Transitional Document example, we have defined the acronym HTML using the <abbr> tag.
XHTML 1.0 Transitional Document
If you created a new web page in XHTML 1.0 Transitional, your <abbr> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Did you know that <abbr>HTML</abbr> stands for HyperText Markup Language?</p>
</body>
</html>
In this XHTML 1.0 Transitional Document example, we have defined the acronym HTML using the <abbr> tag.
XHTML 1.0 Strict Document
If you created a new web page in XHTML 1.0 Strict, your <abbr> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Did you know that <abbr>HTML</abbr> stands for HyperText Markup Language?</p>
</body>
</html>
In this XHTML 1.0 Strict Document example, we have defined the acronym HTML using the <abbr> tag.
XHTML 1.1 Document
If you created a new web page in XHTML 1.1, your <abbr> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Did you know that <abbr>HTML</abbr> stands for HyperText Markup Language?</p>
</body>
</html>
In this XHTML 1.1 Document example, we have defined the acronym HTML using the <abbr> tag.