HTML Abbr Tag: Syntax, Attribute, And Examples

The HTML abbr tag specifies the full form explanation of a short form, acronym, or abbreviation of a long word or phrase. You can enhance the readability and accessibility of your HTML element.

It requires a detailed explanation of an element. Using an <abbr> tag also improves your SEO practice. Here, we will learn more about the HTML abbr tag.

The HTML abbr Tag

The HTML abbr tag is responsible for representing an abbreviation or acronym. It elaborates or explains the meaning of an abbreviation. The additional information provided in the abbr tag is displayed when the mouse is hovered over the tag.

It makes the code clearer and improves accessibility at the forefront. You can easily use it for any element, anywhere, even with global and event attributes in your HTML document.

The <abbr> tag is used in HTML to flag abbreviations and provide additional information about them.
It improves accessibility as well as SEO (Search Engine Optimization).
The HTML abbr tag works with global as well as event attributes.
The title attribute is used to provide the full form of abbreviation when hovered over.
The <abbr> tag is supported on all major browsers, like Chrome, Safari, Firefox, Bing, and more.

The HTML abbr Tag: Syntax

The syntax for the abbr tag is <abbr> along with the title attribute within the tag. Also, the <abbr> tag is not a self-closing HTML tag; hence, it has an opening <abbr> and a closing </abbr> tag.

<abbr title = “”> The Short Form Word </abbr>

Here, the title attribute holds the full form of the abbreviation being referenced within the <abbr> tag. With the HTML abbr tag, you can easily enhance the accessibility as well as readability of certain elements within your web page. It is also a good SEO practice.

Here, the short form of PW is defined by the <abbr> tag with the full form “Physics Wallah” in the title attribute. When users hover over the text “PW”, they can see the full form appearing for better clarity.

What Is the HTML abbr Tag Used For?

The HTML abbr tag is often used with abbreviations or acronyms. It is not a mandatory tag, but it enhances the readability, accessibility, and semantic meaning of the word or phrase enclosed.

HTML CLASS ATTRIBUTE

When you want to provide an expansion of the abbreviation or acronym without affecting the normal flow of the HTML document.
The abbr tag enhances the semantic meaning of the HTML abbr tag. Hence, you can use it whenever using an abbreviation.
With the HTML abbr tag, you can improve accessibility so that readers can read the full form aloud.
The <abbr> tag also improves the user experience as it displays the tooltip with the full form when hovered over.
You can use the HTML abbr tag with the dfn tag (define a keyword) to define an abbreviation in a formal manner.

The HTML abbr Tag Attributes

Let us check some of the major global as well as event attributes supported by the HTML abbr tag.

1. title attribute

This attribute in the HTML abbr tag is used to expand the meaning of an abbreviation. It displays the expansion when users hover over the text enclosed within the <abbr> tag.

2. id

You can use this global attribute with the HTML abbr tag to assign a unique identifier to the element. It is useful when you are styling the element.

3. class

This global attribute is used to add one or more CSS class names for styling purposes.

4. style attribute

This attribute is used to add inline CSS styling directly with the abbreviation tag.

5. lang

This attribute in the <abbr> tag is used to specify the language of the element’s text.

Default CSS Setting for abbr Tag in HTML

When you use the HTML abbr tag without specifying any CSS styling, then by default, CSS will display the tag element with the default value as given below.

abbr {

display: inline;

}

Examples for the HTML abbr Tag

Let us check a few examples to understand the usage of HTML abbr tag below.

1. HTML abbreviation

Let us take a simple example of the HTML abbr tag i,e. The abbr tag is used to present the full form of HTML i.e., Hyper Text Markup Language.

<!DOCTYPE html>

<html>

<body>

<h2> Example of HTML abbr Tag </h2>

defines the structure of the web page.

</p>

</body>

</html>

Output

The <abbr> tag is used to define the abbreviation of HTML, with its full form available in the title attribute. When you hover over the HTML, it displays the “Hyper Text Markup Language”.

2. Education and Upskilling With Physics Wallah

<!DOCTYPE html>

<head>

<title>HTML abbr Tag Example</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 40px;

line-height: 1.6;

}

abbr {

text-decoration: underline dotted;

cursor: help;

color: #0077cc;

}

</style>

</head>

<body>

<h1>Using the HTML <abbr> Tag</h1>

<p>

At <abbr title=”Physics Wallah”>PW</abbr> Skills, students can learn

<abbr title=”Artificial Intelligence”>AI</abbr>,

<abbr title=”Machine Learning”>ML</abbr>, and

<abbr title=”Data Science”>DS</abbr> to build future-ready skills.

</p>

<p>

Our <abbr title=”Learning Management System”>LMS</abbr> provides recorded lectures, live sessions, and assignments to help learners grow.

</p>

</body>

</html>

Output

Best Practices for the HTML abbr Tag

Let us check some of the major practices for using the abbr tag in HTML.

Make sure you always use the “title” attribute, as it gives meaning to the abbreviation.
You must use the <abbr> tag only for real abbreviations or acronyms that need clarification.
Keep the title text short and clear, avoid long paragraphs and unnecessary details.
You can enhance the semantic meaning for both abbreviations and acronyms.
You can use the HTML abbr tag to avoid confusion.
You can use CSS styling for better visual clarity of the element.

Master Complete HTML With PW Skills

Learn and master the complete HTML fundamentals, tags, and build your portfolio with real world projects, assessments, and more in PW Skills Full Stack Web Development Course. Master HTML, CSS, JavaScript, React, SQL, and more.

Get doubt support sessions, industry led professional sessions, project portfolio, career assistance, and industry skills. After completion, you will get an industry recognised certification by PW Skills to level up your game in web development and gain exposure.

HTML abbr Tag FAQs

Q1. What is the HTML abbr tag?

Ans: An HTML abbr tag is used to define the abbreviation or explanation of an element. It uses the title attribute, which holds the explanation of short-form words or phrases.

Q2. What is the title attribute in the abbr tag?

Ans: The title attribute in the HTML abbr tag is used to hold the explanation or full form of an abbreviated term enclosed within the tag.

Q3. How does the abbr tag work?

Ans: The abbr tag in HTML is used to represent the abbreviation or acronym, providing the full expansion of the term in plain text, along with the to mark the abbreviation.

Q4. What is the full form of the abbr tag in HTML?

Ans: The tag stands for the abbreviation, a shortened form of a word or phrase. It saves space and make text easier to read.

The HTML abbr Tag

The HTML abbr Tag: Syntax

What Is the HTML abbr Tag Used For?

The HTML abbr Tag Attributes

1. title attribute

2. id

3. class

4. style attribute

5. lang

Default CSS Setting for abbr Tag in HTML

Examples for the HTML abbr Tag

1. HTML abbreviation

Output

2. Education and Upskilling With Physics Wallah

Output

Best Practices for the HTML abbr Tag

Master Complete HTML With PW Skills

HTML abbr Tag FAQs

Q1. What is the HTML abbr tag?

Q2. What is the title attribute in the abbr tag?

Q3. How does the abbr tag work?

Q4. What is the full form of the abbr tag in HTML?

Related Articles