<abbr>

  • Revision slug: HTML/Element/abbr
  • Revision title: abbr
  • Revision id: 331377
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML Abbreviation Element (<abbr>) 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).

Usage context

Attributes

This element has no other attributes than the global attributes, common to all elements. Note that the title attribute has a specific semantic meaning: it represents the full description of the abbreviation, often, but not necessarily, presented in a tooltip by the user agents.

Default styling

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

  • Some browsers, like IE, 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 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 IE 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', 'the-abbr-element.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")}}.
{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The HTML Abbreviation Element (<code>&lt;abbr&gt;</code>) represents an abbreviation and optionally provides a full description for it. If present, the <strong>title</strong> 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 <strong>title</strong> 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>
<h2 id="Usage_context">Usage context</h2>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/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></li>
  <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="en-US/docs/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="en-US/docs/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>This element has no other attributes than the <a href="/en-US/docs/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements. Note that the <strong>title </strong>attribute has a specific semantic meaning: it represents the full description of the abbreviation, often, but not necessarily, presented in a tooltip by the user agents.</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 (<code><a href="/en-US/docs/CSS/display" title="CSS/display">display</a>: inline</code>) by default, though its default styling varies from one browser to another:</p>
<ul>
  <li>Some browsers, like IE, 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 <code><a href="/en-US/docs/CSS/font-variant" title="CSS/font-variant">font-variant</a>: 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 IE 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" class="internal" 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', 'the-abbr-element.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>
  {{HTML:Element_Navigation}}</div>
Revert to this revision