new repository

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>&lt;abbr&gt;: The Abbreviation element</h1></header><div class="section-content">
+<p>The <code>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</code> element is useful. This can be used, in turn, for styling or scripting purposes.</li> <li>You can use <code>&lt;abbr&gt;</code> in concert with <a href="dfn"><code>&lt;dfn&gt;</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>&lt;abbr&gt;</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>&lt;span&gt;</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>&lt;abbr&gt;</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">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span><span class="token punctuation">&gt;</span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span> is fun and easy!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</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">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span><span class="token punctuation">&gt;</span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span>, you can style your abbreviations!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</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">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Ashok's joke made me <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>LOL<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span> big time.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</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>&lt;abbr&gt;</code> in tandem with <a href="dfn"><code>&lt;dfn&gt;</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">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dfn</span><span class="token punctuation">&gt;</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">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+  A <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>Specification<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dfn</span><span class="token punctuation">&gt;</span></span> (<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span><span class="token punctuation">&gt;</span></span>spec<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</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">&lt;/</span>p</span><span class="token punctuation">&gt;</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">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+  JavaScript Object Notation (<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>abbr</span><span class="token punctuation">&gt;</span></span>JSON<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span>) is a lightweight
+  data-interchange format.
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</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>&lt;abbr&gt;</code> element</a></li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;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>