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

Comments :

Post a Comment