<abbr>

  • Revision slug: HTML/Element/abbr
  • Revision title: abbr
  • Revision id: 35246
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 175 words added

Revision Content

The HTML Abbreviation Element (<abbr>) underlines an abbreviation and provides a full description on hover.

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 do not 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>) underlines an abbreviation and provides a full description on hover.</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;">font-variant: none</span> in the CSS will take care of this case.</li>
</ul>
<p>It is therefore strongly recommended that web authors do not 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 class="script">&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>
<p> </p>
<p> </p>
<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