mozilla

Revision 35256 of <abbr>

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

Revision Content

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

Usage note: when present, the number of the text in the title attribute should match those of the content of the <abbr> element. This is also the case in languages with more than two numbers (like in Arabic which not only have a singular and a plural number, but also a dual number).

Attributes

Like all others HTML element, this element has the global attributes. Note that the title attribute has the semantic meaning of the full description of the abbreviation. 

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

Though the purpose of this element is purely for the convenience of the author, its default styling vary from one browser to another:

  • some browsers, like IE, do not style it differently than a mere {{ HTMLElement("span") }} element;
  • Opera, Firefox and some others will add a dotted underline to the content of the element;
  • finally a few browsers not only put a dotted underline, but put it in small caps; adding something like font-variant: none in the CSS will take care of this case.

It is therefore strongly recommended that web authors not to rely on the default styling. Note that this element is not supported by IE prior to IE7. As these IE doesn'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

{{ HTML:Element_Navigation() }}

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

Revision Source

<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 contains this full description and nothing else.</p>
<div class="note">
<p><strong>Usage note: </strong>when present, the number of the text in the title attribute should match those 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 numbers (like in Arabic which not only have a singular and a plural number, but also a dual number).</p>
</div>
<h3 name="Attributes">Attributes</h3>
<p>Like all others HTML element, this element has the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>. Note that the <strong>title </strong>attribute has the semantic meaning of the full description of the abbreviation. </p>
<h3 class="editable">DOM Interface</h3>
<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>
<h3 name="Notes">Default styling</h3>
<p>Though the purpose of this element is purely for the convenience of the author, its default styling vary from one browser to another:</p>
<ul> <li>some browsers, like IE, do not style it differently than a mere {{ HTMLElement("span") }} element;</li> <li>Opera, Firefox and some others will add a dotted underline to the content of the element;</li> <li>finally a few browsers not only put a dotted underline, but put it in small caps; 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 will take care of this case.</li>
</ul>
<p>It is therefore strongly recommended that web authors not to rely on the default styling. Note that this element is not supported by IE prior to IE7. As these IE doesn'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>
<h3 name="Example">Example</h3>
<pre class="eval">   &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>
<h4 name="Result">Result</h4>
<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>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "ja": "ja/HTML/Element/abbr", "pl": "pl/HTML/Element/abbr" } ) }}</p>
Revert to this revision