mozilla

Revision 35251 of <abbr>

  • Revision slug: HTML/Element/abbr
  • Revision title: abbr
  • Revision id: 35251
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

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.

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 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>) 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>
<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 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>&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