HTML Element: abbr

Date:


Example

Syntax

1
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>

Result

Notice the browser’s default styling for the abbr element; a dotted underline. Hover over the abbreviated text and you’ll be shown a tooltip with the contents from the title attribute:

screenshot example of how the tooltip of HTML abbr element worksscreenshot example of how the tooltip of HTML abbr element worksscreenshot example of how the tooltip of HTML abbr element works

Content

While the primary purpose of the <abbr> element is to mark up abbreviations and acronyms, the HTML specification does not restrict its use to these types of content.

Using the <abbr> element to mark up other types of short-form content, such as dates, measurements, or units, is possible. However, it is recommended to use the <abbr> element for its intended purpose to ensure semantic and accessible markup.

Did You Know?

  • The <abbr> element was introduced in HTML 4.0 in 1998.
  • The <abbr> element includes abbreviations and acronyms. It can also be used to mark up other types of short-form content, such as dates, measurements, and units.
  • Screen readers and other assistive technologies can use the title attribute of the <abbr> element to announce the full form of the abbreviation or acronym to visually impaired users.
  • The <abbr> element can be styled using CSS to display the abbreviation or acronym in a specific way, such as changing the color or adding a border.

Learn More



Source link

About Author

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Share post:

Subscribe

spot_imgspot_img

Popular

More like this
Related

Exciting New Tools for Designers, October 2023

Today Welcome to our all treats-no tricks, October tools...

UIBundle: A One-Stop Shop for Design Resources, Freebies, & Tips

Every designer has a favorite website where...

Collective #784

State of HTML 2023 * Nue * The...

How to Create CSS Ribbon Shapes with a Single Element — SitePoint

In this article, I’ll show you how to...