<abbr>

  • Revision slug: Web/HTML/Element/abbr
  • Revision title: <abbr>
  • Revision id: 492545
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <abbr> Element (or HTML Abbreviation Element) represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else.

Usage note: When present, the grammatical number of the text in the title attribute should match that of the content of the <abbr> element. This is also the case in languages with more than two grammatical numbers (for example, Arabic not only has singular and plural categories, but also a dual category).

Attributes

This element only includes the global attributes.

Use the {{htmlattrdef("title")}} attribute to define the full description of the abbreviation. Many user agents present this as a tooltip.

Default styling

The purpose of this element is purely for the convenience of the author and all browsers display it inline ({{cssxref('display')}}: inline) by default, though its default styling varies from one browser to another:

  • Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element.
  • Opera, Firefox, and some others add a dotted underline to the content of the element.
  • A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}: none in the CSS takes care of this case.

It is therefore strongly recommended that web authors not rely on the default styling. Note that this element is not supported by Internet Explorer prior to IE7. As these IE versions don't allow styling for unknown elements, the following script is necessary to allow it:

<!--[if lte IE 6]>
  <script>
    document.createElement("abbr");
  </script>
<![endif]-->

Example

<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>

Result

Image:Abbr.gif

Tony Blair is the prime minister of the UK

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatAtLeast(2.0)}} {{CompatAtLeastFx(1.0)}} 7.0 {{CompatAtLeast(1.3)}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • Other elements conveying text-level semantics: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
{{HTMLRef}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <em>HTML <code>&lt;abbr&gt;</code> Element</em> (or HTML Abbreviation Element) represents an abbreviation and optionally provides a full description for it. If present, the <code><strong>title</strong></code> attribute must contain this full description and nothing else.</p>
<div class="note">
 <p><strong>Usage note: </strong>When present, the grammatical number of the text in the <code><strong>title</strong></code> attribute should match that of the content of the <code>&lt;abbr&gt;</code> element. This is also the case in languages with more than two grammatical numbers (for example, Arabic not only has singular and plural categories, but also a dual category).</p>
</div>
<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content</li>
 <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 3.6) inclusive, Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element.</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<p>Use the {{htmlattrdef("title")}}&nbsp;attribute to define the&nbsp;full description of the abbreviation. Many user agents present this as a tooltip.</p>
<h2 id="Default_styling">Default styling</h2>
<p>The purpose of this element is purely for the convenience of the author and all browsers display it inline ({{cssxref('display')}}<code>: inline</code>) by default, though its default styling varies from one browser to another:</p>
<ul>
 <li>Some browsers, like Internet Explorer, do not style it differently than a {{HTMLElement("span")}} element.</li>
 <li>Opera, Firefox, and some others add a dotted underline to the content of the element.</li>
 <li>A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like {{cssxref('font-variant')}}<code>: none</code> in the CSS takes care of this case.</li>
</ul>
<p>It is therefore strongly recommended that web authors not rely on the default styling. Note that this element is not supported by Internet Explorer prior to IE7. As these IE versions don't allow styling for unknown elements, the following script is necessary to allow it:</p>
<pre class="brush:html">
&lt;!--[if lte IE 6]&gt;
  &lt;script&gt;
    document.createElement("abbr");
  &lt;/script&gt;
&lt;![endif]--&gt;</pre>
<h2 id="Example">Example</h2>
<pre class="brush: html">
&lt;p&gt;Tony Blair is the prime minister of the &lt;abbr title="United Kingdom"&gt;UK&lt;/abbr&gt;&lt;/p&gt;
</pre>
<h3 id="Result" name="Result">Result</h3>
<p><img alt="Image:Abbr.gif" src="/@api/deki/files/17/=Abbr.gif" /></p>
<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatAtLeast(2.0)}}</td>
    <td>{{CompatAtLeastFx(1.0)}}</td>
    <td>7.0</td>
    <td>{{CompatAtLeast(1.3)}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
</ul>
<div>
 {{HTMLRef}}</div>
Revert to this revision