Learn How to use HTML abbr tag

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:

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 the abbr 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 as color or size.
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.

HTML5
HTML4
XHTML

We will discuss the HTML abbr tag below, with some examples of how to use the abbr tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

HTML5 Document

here’s an example of how to use the abbr tag in an HTML5 document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 twice. The first time, we use it to provide an abbreviation for “Hypertext Markup Language” and the second time, we use it to provide an abbreviation for “International Business Machines Corporation”.

We have also used the title attribute with both instances of the abbr tag to provide additional information about the abbreviations when the user hovers over the element.

In addition to the abbr tag, we have also used some other common HTML5 elements, such as head, meta, title, h1, and p.

This example should render a web page with a heading that includes an abbreviation for HTML, followed by two paragraphs with abbreviations for WHO and IBM, respectively. When the user hovers over any of the abbreviations, they should see a tooltip with additional information about the organization or phrase.

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>

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.

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>

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.

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.