HTML abbr Tag

The abbr tag is used to define an abbreviation or an acronym like PHP, HTML, CSS, NASA, LOL etc. Using abbr tag to define abbreviations can be helpful for browsers and search engines to understand the content in a better way. The title attribute is used in abbr tag to define the abbreviation.

Table of Contents

Syntax of abbr Tag

Syntax of abbr tag is pretty simple as shown below.


<!DOCTYPE html>
<html>
<body>
<p>abbr is a <abbr title="HyperText Markup Language">HTML</abbr> tag.</p>
</body>
</html>

Ouput

Output of the above code is shown below, hover over the word HTML and you will see it's abbreviation.

abbr is a HTML tag.

Title Attribute inside abbr Tag

The title attribute is used to define or explain the abbreviation. The acronym or abbreviation is written between the starting abbr tag and ending abbr tag. While it's full form is written inside title attribute.

The full form or explanation of any acronym written inside title attribute serve as tooltip and is displayed when the cursor is hovered over the abbreviation.

Default Styling of abbr Tag

The abbr Tag is inline level element. It's default styling is just like anchor tag or span tag.

Global Attributes Support in abbr Tag

The abbr Tag supports all Global Attributes.

Event Attributes Support in abbr Tag

The abbr Tag supports all Event Attributes.

Example of abbr Tag

Another simple example of abbr tag is shown below.


<!DOCTYPE html>
<html>
<body>
<p>The word <abbr title="as soon as possible">A.S.A.P</abbr> stands for as soon as possible.</p>
</body>
</html>

Output

The word A.S.A.P stands for as soon as possible.

HTML Abbr Tag Video

Watch our video on Abbr tag and subscribe our Youtube Channel.