diff options
Diffstat (limited to 'devdocs/html/element%2Fabbr.html')
| -rw-r--r-- | devdocs/html/element%2Fabbr.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fabbr.html b/devdocs/html/element%2Fabbr.html new file mode 100644 index 00000000..a429eb88 --- /dev/null +++ b/devdocs/html/element%2Fabbr.html @@ -0,0 +1,155 @@ +<header><h1><abbr>: The Abbreviation element</h1></header><div class="section-content"> +<p>The <code><abbr></code> <a href="../index">HTML</a> element represents an abbreviation or acronym.</p> <p>When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <code><abbr></code> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.</p> <p>The optional <a href="../global_attributes#title"><code>title</code></a> attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, <code>title</code> must contain this full description and nothing else.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/abbr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element only supports the <a href="../global_attributes">global attributes</a>. The <a href="../global_attributes#title"><code>title</code></a> attribute has a specific semantic meaning when used with the <code><abbr></code> element; it <em>must</em> contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.</p> <p>Each <code><abbr></code> element you use is independent of all others; providing a <code>title</code> for one does not automatically attach the same expansion text to others with the same content text.</p> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="typical_use_cases">Typical use cases</h3> +<div class="section-content"> +<p>It's certainly not required that all abbreviations be marked up using <code><abbr></code>. There are, though, a few cases where it's helpful to do so:</p> <ul> <li>When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <code><abbr></code> with an appropriate <a href="../global_attributes#title"><code>title</code></a>.</li> <li>To define an abbreviation which may be unfamiliar to the reader, present the term using <code><abbr></code> and inline text providing the definition. Include a <code>title</code> attribute only when the inline expansion or definition is not available.</li> <li>When an abbreviation's presence in the text needs to be semantically noted, the <code><abbr></code> element is useful. This can be used, in turn, for styling or scripting purposes.</li> <li>You can use <code><abbr></code> in concert with <a href="dfn"><code><dfn></code></a> to establish definitions for terms which are abbreviations or acronyms. See the example <a href="#defining_an_abbreviation">Defining an abbreviation</a> below.</li> </ul> +</div> +<h3 id="grammar_considerations">Grammar considerations</h3> +<div class="section-content"><p>In languages with <a href="https://en.wikipedia.org/wiki/Grammatical_number" target="_blank">grammatical number</a> (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.</p></div> +<h2 id="default_styling">Default styling</h2> +<div class="section-content"> +<p>The purpose of this element is purely for the convenience of the author and all browsers display it inline (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a><code>: inline</code>) by default, though its default styling varies from one browser to another:</p> <p>Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <a href="span"><code><span></code></a> element. To control this styling, use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a>.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="marking_up_an_abbreviation_semantically">Marking up an abbreviation semantically</h3> +<div class="section-content"> +<p>To mark up an abbreviation without providing an expansion or description, use <code><abbr></code> without any attributes, as seen in this example.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BuRjbvvFo9xCc1rYmeTHk8owTBH+XTb20JibP3th01U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> is fun and easy!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Marking up an abbreviation semantically sample" id="frame_marking_up_an_abbreviation_semantically" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=marking_up_an_abbreviation_semantically" loading="lazy"></iframe> +</div> +</div> +<h3 id="styling_abbreviations">Styling abbreviations</h3> +<div class="section-content"> +<p>You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fOL8fradlYXqM3/G0fmRsKhB98FehxQRao36MN2nuF0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>, you can style your abbreviations!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="+OjG0mJBckdkkJYLL4gazovCHMkytzzVCr9aZk7YLyc=" data-language="css"><span class="token selector">abbr</span> <span class="token punctuation">{</span> + <span class="token property">font-variant</span><span class="token punctuation">:</span> all-small-caps<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Styling abbreviations sample" id="frame_styling_abbreviations" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=styling_abbreviations" loading="lazy"></iframe> +</div> +</div> +<h3 id="providing_an_expansion">Providing an expansion</h3> +<div class="section-content"> +<p>Adding a <a href="../global_attributes#title"><code>title</code></a> attribute lets you provide an expansion or definition for the abbreviation or acronym.</p> <h4 id="html_3">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YCByAVLqtCO50Ol1lLCo9PG3Jg5KVWP2bLsd1G7f7b0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ashok's joke made me <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Laugh Out Loud<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>LOL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> big time.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Providing an expansion sample" id="frame_providing_an_expansion" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=providing_an_expansion" loading="lazy"></iframe> +</div> +</div> +<h3 id="defining_an_abbreviation">Defining an abbreviation</h3> +<div class="section-content"> +<p>You can use <code><abbr></code> in tandem with <a href="dfn"><code><dfn></code></a> to more formally define an abbreviation, as shown here.</p> <h4 id="html_4">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="whhZ8zMjla7A/XZ3kYMZDhYTy87eZ2lcNAJHMYelWiQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HyperText Markup Language<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> is a + markup language used to create the semantics and structure of a web page. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + A <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spec<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Specification<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>spec<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>) is a document that + outlines in detail how a technology or API is intended to function and how it + is accessed. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Defining an abbreviation sample" id="frame_defining_an_abbreviation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=defining_an_abbreviation" loading="lazy"></iframe> +</div> +</div> +<h3 id="accessibility_concerns">Accessibility concerns</h3> +<div class="section-content"> +<p>Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.</p> <p>Only include a <code>title</code> if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.</p> <h4 id="html_5">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="OrwO8NkLLWVv8DcE3Y2at7troO6W6bp8nGEeb0hhG28=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + JavaScript Object Notation (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>JSON<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>) is a lightweight + data-interchange format. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Accessibility concerns sample" id="frame_accessibility_concerns" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=accessibility_concerns" loading="lazy"></iframe> +</div> <p>This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.</p> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../content_categories#phrasing_content">Phrasing content</a></td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM Interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-abbr-element">HTML Standard <br><small># the-abbr-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>abbr</code></th> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations">Using the <code><abbr></code> element</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr</a> + </p> +</div> |