HTML <abbr> Tag

Tag Abbr is the subject of this post. We hope that it will contribute to the learning process.

Abbreviations are labeled like this when referring to Tag Abbr:


<!DOCTYPE html> <html> <body><p>The <abbr title="United Nation">UN</abbr> was founded in 1945.</p> </body> </html>

The abbreviation <abbr> can also be defined by combining it with <dfn>:


<!DOCTYPE html> <html><body><p><dfn><abbr title="Cascading Style Sheets">CSS</abbr> </dfn> A language for describing HTML style.</p></body> </html>

Here is an example of <abbr> tag used twice to indicate two different abbreviations:


<!DOCTYPE html> <html> <head> <title>Mr Examples</title> </head> <body> <p>The <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a government agency that conducts space research.</p> <p>The <abbr title="Association for Computing Machinery">ACM</abbr> is a professional organization for computer scientists.</p> </body> </html>

Tag Abbr Uses and Definitions

The <abbr> tag indicates an abbreviation or shorthand, for example, “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, and “ATM”.

Advice: You can display the description when you mouse over an abbreviation or acronym using the globaltitle attribute.

Browser Compatibility


Global Attributes

In HTML, the <abbr> tag accepts Global Attributes.

Event Attributes

In HTML, the Tag <abbr> accepts Event Attributes

CSS Settings By Default

Tag <abbr> will be displayed by the majority of browsers with these default values:

abbr {
display: inline;

Benefits of Using HTML <abbr> Tag

The HTML <abbr> tag is used to define an abbreviation or acronym. Here are some benefits of using this tag:

  • Using the <abbr> tag can improve the accessibility of your website by providing a way to define abbreviations and acronyms. Screen readers can announce the full meaning of the abbreviation or acronym when they encounter the <abbr> tag, which can be helpful for people with visual impairments.
  • Abbreviations and acronyms can be confusing or unclear to readers who are unfamiliar with them. Using the <abbr> tag to provide a full explanation of the abbreviation or acronym can help ensure that readers understand the content.
  • Including <abbr> tags on your website can help improve search engine optimization (SEO) by providing context for search engines. Search engines can use the full meaning of the abbreviation or acronym to better understand the content of your website.
  • Using the <abbr> tag can help ensure consistency in the way abbreviations and acronyms are defined on your website. By providing a standard way to define abbreviations and acronyms, you can help ensure that all content on your website is clear and easy to understand.
  • As your website evolves and new content is added, it can be easy to forget what certain abbreviations and acronyms stand for. Using the <abbr> tag to define them ensures that their meaning is always clear, even if the context changes over time.

Do leave your reaction below in order to appreciate our efforts or to suggest some improvements for the betterment of this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *