new repository

1 files changed, 141 insertions, 0 deletions

diff --git a/devdocs/html/element%2Fdfn.html b/devdocs/html/element%2Fdfn.html
new file mode 100644
index 00000000..7f74d817
--- /dev/null
+++ b/devdocs/html/element%2Fdfn.html
@@ -0,0 +1,141 @@
+<header><h1>&lt;dfn&gt;: The Definition element</h1></header><div class="section-content"><p>The <code>&lt;dfn&gt;</code> <a href="../index">HTML</a> element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <a href="p"><code>&lt;p&gt;</code></a> element, the <a href="dt"><code>&lt;dt&gt;</code></a>/<a href="dd"><code>&lt;dd&gt;</code></a> pairing, or the nearest <a href="section"><code>&lt;section&gt;</code></a> ancestor of the <code>&lt;dfn&gt;</code> element, is considered to be the definition of the term.</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/dfn.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
+<h2 id="attributes">Attributes</h2>
+<div class="section-content">
+<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <p>The <a href="../global_attributes#title"><code>title</code></a> attribute has special meaning, as noted below.</p>
+</div>
+<h2 id="usage_notes">Usage notes</h2>
+<div class="section-content"><p>There are some not-entirely-obvious aspects to using the <code>&lt;dfn&gt;</code> element. We examine those here.</p></div>
+<h3 id="specifying_the_term_being_defined">Specifying the term being defined</h3>
+<div class="section-content">
+<p>The term being defined is identified following these rules:</p> <ol> <li>If the <code>&lt;dfn&gt;</code> element has a <a href="../global_attributes#title"><code>title</code></a> attribute, the value of the <code>title</code> attribute is considered to be the term being defined. The element must still have text within it, but that text may be an abbreviation (perhaps using <a href="abbr"><code>&lt;abbr&gt;</code></a>) or another form of the term.</li> <li>If the <code>&lt;dfn&gt;</code> contains a single child element and does not have any text content of its own, and the child element is an <a href="abbr"><code>&lt;abbr&gt;</code></a> element with a <code>title</code> attribute itself, then the exact value of the <code>&lt;abbr&gt;</code> element's <code>title</code> is the term being defined.</li> <li>Otherwise, the text content of the <code>&lt;dfn&gt;</code> element is the term being defined. This is shown <a href="#basic_identification_of_a_term">in the first example below</a>.</li> </ol> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If the <code>&lt;dfn&gt;</code> element has a <code>title</code> attribute, it <em>must</em> contain the term being defined and no other text.</p> </div>
+</div>
+<h3 id="links_to_dfn_elements">Links to <code>&lt;dfn&gt;</code> elements</h3>
+<div class="section-content">
+<p>If you include an <a href="../global_attributes#id"><code>id</code></a> attribute on the <code>&lt;dfn&gt;</code> element, you can then link to it using <a href="a"><code>&lt;a&gt;</code></a> elements. Such links should be uses of the term, with the intent being that the reader can quickly navigate to the term's definition if they're not already aware of it, by clicking on the term's link.</p> <p>This is shown in the example under <a href="#links_to_definitions">Links to definitions</a> below.</p>
+</div>
+<h2 id="examples">Examples</h2>
+<div class="section-content"><p>Let's take a look at some examples of various usage scenarios.</p></div>
+<h3 id="basic_identification_of_a_term">Basic identification of a term</h3>
+<div class="section-content">
+<p>This example uses a plain <code>&lt;dfn&gt;</code> element to identify the location of a term within the definition.</p> <h4 id="html">HTML</h4> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="K4NxBjt6e2dzQ1k7aPedW121cwVKhGatkmwT5kJ1k5U=" 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>
+  The <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>HTML Definition element (<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 entity named-entity">&amp;lt;</span>dfn<span class="token entity named-entity">&amp;gt;</span><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>strong</span><span class="token punctuation">&gt;</span></span> is used
+  to indicate the term being defined within the context of a definition phrase
+  or sentence.
+<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> <p>Since the <code>&lt;dfn&gt;</code> element has no <code>title</code>, the text contents of the <code>&lt;dfn&gt;</code> element itself are used as the term being defined.</p> <h4 id="result">Result</h4>
+<div class="code-example" id="sect2">
+
+<iframe class="sample-code-frame" title="Basic identification of a term sample" id="frame_basic_identification_of_a_term" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dfn/runner.html?id=basic_identification_of_a_term" loading="lazy"></iframe>
+</div>
+</div>
+<h3 id="links_to_definitions">Links to definitions</h3>
+<div class="section-content">
+<p>To add links to the definitions, you create the link the same way you always do, with the <a href="a"><code>&lt;a&gt;</code></a> element.</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="jeNTroJjW25Gty0mZNFaezHdnNqxlaNXSuMQGzMU5bk=" 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>
+  The
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>HTML Definition element (<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>definition-dfn<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity">&amp;lt;</span>dfn<span class="token entity named-entity">&amp;gt;</span><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>strong</span><span class="token punctuation">&gt;</span></span>
+  is used to indicate the term being defined within the context of a definition
+  phrase or sentence.
+<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>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
+  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
+  Scrupulum, inquam, abeunti;
+<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>
+  Because of all of that, we decided to use the
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#definition-dfn<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity">&amp;lt;</span>dfn<span class="token entity named-entity">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> element for this
+  project.
+<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> <p>Here we see the definition — now with an <a href="../global_attributes#id"><code>id</code></a> attribute, <code>"definition-dfn"</code>, which can be used as the target of a link. Later on, a link is created using <code>&lt;a&gt;</code> with the <a href="a#href"><code>href</code></a> attribute set to <code>"#definition-dfn"</code> to set up the link back to the definition.</p> <h4 id="result_2">Result</h4>
+<div class="code-example" id="sect3">
+
+<iframe class="sample-code-frame" title="Links to definitions sample" id="frame_links_to_definitions" width="650" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dfn/runner.html?id=links_to_definitions" loading="lazy"></iframe>
+</div>
+</div>
+<h3 id="using_abbreviations_and_definitions_together">Using abbreviations and definitions together</h3>
+<div class="section-content">
+<p>In some cases, you may wish to use an abbreviation for a term when defining it. This can be done by using the <code>&lt;dfn&gt;</code> and <a href="abbr"><code>&lt;abbr&gt;</code></a> elements in tandem, like this:</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="6wOpykyE3hb3xiwbCslf2EsqSo6hdG/eJXvTCxdElXw=" 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>
+  The <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 attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hubble Space Telescope<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>HST<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 among the
+  most productive scientific instruments ever constructed. It has been in orbit
+  for over 20 years, scanning the sky and returning data and photographs of
+  unprecedented quality and detail.
+<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>
+  Indeed, the <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>Hubble Space Telescope<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>HST<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>abbr</span><span class="token punctuation">&gt;</span></span> has arguably done
+  more to advance science than any device ever built.
+<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> <p>Note the <code>&lt;abbr&gt;</code> element nested inside the <code>&lt;dfn&gt;</code>. The former establishes that the term is an abbreviation ("HST") and specifies the full term ("Hubble Space Telescope") in its <code>title</code> attribute. The latter indicates that the abbreviated term represents a term being defined.</p> <h4 id="result_3">Result</h4>
+<div class="code-example" id="sect4">
+
+<iframe class="sample-code-frame" title="Using abbreviations and definitions together sample" id="frame_using_abbreviations_and_definitions_together" width="650" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dfn/runner.html?id=using_abbreviations_and_definitions_together" loading="lazy"></iframe>
+</div>
+</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>, but no <a href="dfn" aria-current="page"><code>&lt;dfn&gt;</code></a> element must be a descendant. </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://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/term_role"><code>term</code></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-dfn-element">HTML Standard <br><small># the-dfn-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>dfn</code></th>
+<td class="bc-supports-yes">15</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">15</td>
+<td class="bc-supports-yes">6</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">6</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>Elements related to definition lists: <a href="dl"><code>&lt;dl&gt;</code></a>, <a href="dt"><code>&lt;dt&gt;</code></a>, <a href="dd"><code>&lt;dd&gt;</code></a>
+</li> <li><a href="abbr"><code>&lt;abbr&gt;</code></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/dfn" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn</a>
+  </p>
+</div>