abbr HTML Tag Abbreviation Object examples

<abbr> HTML Tag Abbreviation Object examples HTML, CSS Tutorials

The <abbr> HTML element represents an abbreviation or acronym. When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.

Attributes

This element only supports the global attributes. The title attribute has a specific semantic meaning when used with the <abbr> element; it must contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor has hovered over the element.

Each <abbr> element you use is independent from all others; providing a title for one does not automatically attach the same expansion text to others with the same content text.

Definition and Usage:

The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ATM" "ASAP","JAVA"  Ect.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Example

An abbreviation is marked up as follows:

The <abbr title="She was beautiful">WHEN</abbr> was younger.

Default abbr CSS Settings

Most browsers will display the <abbr> element with the following default values:

Example

abbr {

  display: inline;

}

Other Example:

 <abbr> can also be used with <dfn> to define an abbreviation:

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr>

</dfn> is a language that describes the style of an HTML document.</p>

Copy the code below to try it online:

<h1>The abbr element and the dfn element</h1>

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr>

</dfn> is a language that describes the style of an HTML document.</p>

Styling abbreviations

You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {

  font-variant: all-small-caps;

}

Try It