<abbr>

  • Revision slug: HTML/Element/abbr
  • Revision title: abbr
  • Revision id: 287199
  • Created:
  • Creator: tregagnon
  • Is current revision? No
  • Comment 1 words added, 9 words removed

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

Content categories Flow content, phrasing content
Permitted content Phrasing content
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts phrasing content
Normative document HTML5, section 4.6.8 ; HTML4.01, section 9.2.1

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. 

DOM Interface

This element implements the HTMLElement interface.

Implementation note: Up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

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

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

  • Others 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() }}

{{ languages( { "ja": "ja/HTML/Element/abbr", "pl": "pl/HTML/Element/abbr" } ) }}

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 <span style="font-family: Courier New;">&lt;abbr&gt;</span> 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>
<table class="fullwidth-table"> <tbody> <tr> <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></td> </tr> <tr> <td>Permitted content</td> <td>Phrasing content</td> </tr> <tr> <td>Tag omission</td> <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts phrasing content</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-abbr-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-abbr-element">HTML5, section 4.6.8</a> ; <a class="external" href="http://www.w3.org/TR/REC-html40/struct/text.html#edef-ABBR" title="http://www.w3.org/TR/REC-html40/struct/text.html#edef-ABBR">HTML4.01, section 9.2.1</a></td> </tr> </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>This element has no other attributes than the <a href="/en/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="DOM.C2.A0Interface">DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note"><strong>Implementation note: </strong>Up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</div>
<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 (<span style="font-family: Courier New;"><a href="/en/CSS/display" title="en/CSS/display">display</a>: inline</span>) 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 <span style="font-family: Courier New;"><a href="/en/CSS/font-variant" title="en/CSS/font-variant">font-variant</a>: none</span> 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>&lt;!--[if lte IE 6]&gt;
  &lt;script&gt;
    <code class="js">document.createElement(<span class="js__string">"abbr"</span>);<br>  &lt;/script&gt;<br></code><code class="html"><span class="html__ie_style">&lt;![endif]--&gt;</span></code></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="Compatibility">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>Others elements conveying <a href="/en/HTML/Text_level_semantics_conveying_elements" title="en/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>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "ja": "ja/HTML/Element/abbr", "pl": "pl/HTML/Element/abbr" } ) }}</p>
Revert to this revision