HTML: <abbr> tag
In this series of learning HTML, we will teach you how to use HTML abbr tag with proper syntax and lots of examples. Let’s start on the HTML abbr tag.
Description of HTML abbr tag
The HTML “abbr” tag is used to define an abbreviation or acronym and to provide a full explanation or expansion of the abbreviation. The “abbr” tag is useful for improving the accessibility and readability of content, particularly for technical terms or jargon.
Here is an example of how to use the “abbr” tag in HTML:
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
In the example above, the “abbr” tag is used to indicate that “WHO” is an abbreviation for “World Health Organization”. The full explanation or expansion of the abbreviation is provided in the “title” attribute of the “abbr” tag, which is typically displayed as a tooltip when the user hovers over the abbreviation.
The “abbr” tag can also be used in conjunction with other semantic tags, such as “p” or “dt” (definition term), to provide additional information about technical terms or jargon. For example:
<dl>
<dt><abbr title="Hypertext Markup Language">HTML</abbr></dt>
<dd>The standard markup language for creating web pages.</dd>
<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>A stylesheet language used for describing the presentation of a document written in HTML.</dd>
</dl>
In the example above, the “abbr” tag is used to indicate the abbreviation for technical terms or jargon used in the definition list. By using semantic tags like “abbr” and “dt”, the HTML code becomes more meaningful and easier to understand, both for human readers and for search engines.
Syntax of HTML abbr tag
The HTML <abbr>
tag is used to define an abbreviation or an acronym in a web page. The syntax of the <abbr>
tag is as follows:
<abbr title="description of the abbreviation/acronym">abbreviation/acronym</abbr>
Here, the opening tag <abbr>
is used to indicate the start of the abbreviation or acronym, and the closing tag </abbr>
is used to indicate the end of the abbreviation or acronym. The title
attribute is used to provide a description of the abbreviation or acronym.
Example:
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
In this example, the <abbr>
element is used to define the acronym “WHO” for the World Health Organization. The title
attribute provides additional information about what the acronym stands for. When a user hovers over the acronym on the web page, the full form will be displayed in a tooltip.
Global Attributes
The abbr
tag in HTML is used to define an abbreviation or an acronym. It is a inline element that can be used within a sentence to provide a short form of a longer word or phrase.
In addition to the standard attributes that can be used on most HTML elements, the abbr
tag also supports the following global attributes:
class
: This attribute is used to define one or more class names for the element, which can be used to apply CSS styles to the element.dir
: This attribute is used to define the direction of the element’s text, which can be set to “ltr” (left-to-right) or “rtl” (right-to-left).id
: This attribute is used to provide a unique identifier for the element, which can be used to link to the element or to apply styles or scripting to the element.lang
: This attribute is used to define the language of the element’s content.style
: This attribute is used to apply inline CSS styles to the element.title
: This attribute is used to provide a title or tooltip for the element.
Here’s an example of how the abbr
tag can be used with some of these attributes:
<p>The <abbr title="World Health Organization" lang="en">WHO</abbr> is a specialized agency of the United Nations.</p>
In this example, the abbr
tag is used to provide an abbreviation for the “World Health Organization”. The title
attribute is used to provide a tooltip when the user hovers over the abbreviation, while the lang
attribute is used to indicate that the language of the abbreviation is English.
Event Attributes
The abbr
tag in HTML does not have any specific event attributes. Event attributes are used to define JavaScript functions that are executed when certain events occur, such as when the user clicks on an element or when the element is loaded in the web page.
However, the abbr
tag can be used as a part of a larger HTML element that does have event attributes, such as a button or a link. For example, you can wrap an abbreviation with a link and define an onclick
attribute on the link to execute a JavaScript function when the user clicks on the link.
Here’s an example of how the abbr
tag can be used with a link that has an onclick
event:
<a href=”#” onclick=”myFunction()”><abbr title=”World Health Organization”>WHO</abbr></a>
In this example, the onclick
event is defined on the link element, and it calls a JavaScript function called myFunction()
when the user clicks on the link. The abbreviation “WHO” is wrapped inside the link element and has a title
attribute that provides a tooltip when the user hovers over the abbreviation.
Other Attributes
In addition to the global attributes and event attributes, the abbr
tag in HTML also supports a specific attribute called title
.
The title
attribute is used to provide additional information about the abbreviation or acronym when the user hovers over the element. The text specified in the title
attribute is displayed in a tooltip when the user’s mouse cursor hovers over the element.
Here’s an example of how the title
attribute can be used with the abbr
tag:
<p>The <abbr title=”World Health Organization”>WHO</abbr> is a specialized agency of the United Nations.</p>
In this example, the abbr
tag is used to provide an abbreviation for the “World Health Organization”. The title
attribute is used to provide additional information about the organization when the user hovers over the abbreviation.
Notes on HTML abbr tag
Here are some important notes to keep in mind when using the abbr
tag in HTML:
- The
abbr
tag is used to provide an abbreviation or acronym for a longer word or phrase. It should only be used when the full form of the word or phrase is mentioned elsewhere in the text. - The
title
attribute is an important attribute to use with theabbr
tag. It provides additional information about the abbreviation when the user hovers over the element. - The
abbr
tag is an inline element and can be used within a sentence. It is not a block-level element and should not be used to create paragraphs or headings. - The
abbr
tag does not have any specific event attributes, but it can be used within other elements that do have event attributes, such as links or buttons. - It is recommended to use CSS styles to define the appearance of the
abbr
tag, rather than using deprecated attributes such ascolor
orsize
. - The
abbr
tag is supported by all major web browsers and can be used in HTML5 and earlier versions of HTML.
Overall, the abbr
tag is a useful HTML element for providing abbreviations or acronyms in web content, and should be used with the title
attribute to provide additional context to the user.
Browser Compatibility
TheHTML abbr tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML abbr tag
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.
HTML 4.01 Transitional Document
here’s an example of how to use the abbr
tag in an HTML 4.01 Transitional document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example of the abbr tag</title>
</head>
<body>
<h1>Using the <abbr title="Hypertext Markup Language">HTML</abbr> abbr tag</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
<p>The <abbr title="International Business Machines Corporation">IBM</abbr> is a multinational technology company.</p>
</body>
</html>
In this example, we have used the abbr
tag in the same way as in the previous example, providing abbreviations for “Hypertext Markup Language”, “World Health Organization”, and “International Business Machines Corporation”.
However, since this is an HTML 4.01 Transitional document, we do not have access to all of the same elements and attributes as in HTML5. For example, we do not have access to the meta
element, which is used to specify the character set of the document.
Instead, we use the title
element within the head
section to specify the title of the document. We also specify the document type using the DOCTYPE
declaration at the beginning of the document.
Overall, the abbr
tag works the same way in HTML 4.01 as it does in HTML5, providing a way to specify abbreviations or acronyms and provide additional information about them using the title
attribute.
XHTML 1.0 Transitional Document
here’s an example of how to use the abbr
tag in an XHTML 1.0 Transitional document:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Example of the abbr tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Using the <abbr title="Hypertext Markup Language">HTML</abbr> abbr tag</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
<p>The <abbr title="International Business Machines Corporation">IBM</abbr> is a multinational technology company.</p>
</body>
</html>
In this example, we have used the abbr
tag in the same way as in the previous examples, providing abbreviations for “Hypertext Markup Language”, “World Health Organization”, and “International Business Machines Corporation”.
However, since this is an XHTML 1.0 Transitional document, we must use XML syntax and close all tags, including empty elements such as the meta
element. We also include an XML declaration at the beginning of the document.
In addition to the abbr
tag, we have also used the meta
element to specify the character encoding of the document, and we have specified the language of the document using the xml:lang
and lang
attributes.
Overall, the abbr
tag works the same way in XHTML 1.0 as it does in HTML5 and HTML 4.01, providing a way to specify abbreviations or acronyms and provide additional information about them using the title
attribute.
XHTML 1.0 Strict Document
here’s an example of how to use the abbr
tag in an XHTML 1.0 Strict document:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Example of the abbr tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Using the <abbr title="Hypertext Markup Language">HTML</abbr> abbr tag</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
<p>The <abbr title="International Business Machines Corporation">IBM</abbr> is a multinational technology company.</p>
</body>
</html>
In this example, we have used the abbr
tag in the same way as in the previous examples, providing abbreviations for “Hypertext Markup Language”, “World Health Organization”, and “International Business Machines Corporation”.
Since this is an XHTML 1.0 Strict document, we must adhere to a more strict set of rules than in the Transitional document. For example, we cannot use presentational elements such as font
or center
, and we cannot use the name
attribute on the a
element.
In addition to the abbr
tag, we have also used the meta
element to specify the character encoding of the document, and we have specified the language of the document using the xml:lang
and lang
attributes.
Overall, the abbr
tag works the same way in XHTML 1.0 Strict as it does in HTML5, providing a way to specify abbreviations or acronyms and provide additional information about them using the title
attribute.
XHTML 1.1 Document
here’s an example of how to use the abbr
tag in an XHTML 1.1 document:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head>
<title>Example of the abbr tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Using the <abbr title="Hypertext Markup Language">HTML</abbr> abbr tag</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
<p>The <abbr title="International Business Machines Corporation">IBM</abbr> is a multinational technology company.</p>
</body>
</html>
In this example, we have used the abbr
tag in the same way as in the previous examples, providing abbreviations for “Hypertext Markup Language”, “World Health Organization”, and “International Business Machines Corporation”.
Since this is an XHTML 1.1 document, we must use the XML syntax and close all tags, including empty elements such as the meta
element. We also do not need to specify a DTD
as it is included in the DOCTYPE
declaration.
In addition to the abbr
tag, we have also used the meta
element to specify the character encoding of the document, and we have specified the language of the document using the xml:lang
attribute.
Overall, the abbr
tag works the same way in XHTML 1.1 as it does in HTML5 and other versions of XHTML, providing a way to specify abbreviations or acronyms and provide additional information about them using the title
attribute.