new repository

1 files changed, 130 insertions, 0 deletions

diff --git a/devdocs/html/global_attributes%2Ftitle.html b/devdocs/html/global_attributes%2Ftitle.html
new file mode 100644
index 00000000..c8e5d27d
--- /dev/null
+++ b/devdocs/html/global_attributes%2Ftitle.html
@@ -0,0 +1,130 @@
+<header><h1>title</h1></header><div class="section-content"><p>The <code>title</code> <a href="../global_attributes">global attribute</a> contains text representing advisory information related to the element it belongs to.</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/attribute-title.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The main use of the <code>title</code> attribute is to label <a href="../element/iframe"><code>&lt;iframe&gt;</code></a> elements for assistive technology.</p> <p>The <code>title</code> attribute may also be used to label controls in <a href="../element/table">data tables</a>.</p> <p>The <code>title</code> attribute, when added to <a href="../element/link"><code>&lt;link rel="stylesheet"&gt;</code></a>, creates an alternate stylesheet. When defining an alternative style sheet with <code>&lt;link rel="alternate"&gt;</code> the attribute is required and must be set to a non-empty string.</p> <p>If included on the <a href="../element/abbr"><code>&lt;abbr&gt;</code></a> opening tag, the <code>title</code> must be a full expansion of the abbreviation or acronym. Instead of using <code>title</code>, when possible, provide an expansion of the abbreviation or acronym in plain text on first use, using the <code>&lt;abbr&gt;</code> to mark up the abbreviation. This enables all users know what name or term the abbreviation or acronym shortens while providing a hint to user agents on how to announce the content.</p> <p>While <code>title</code> can be used to provide a programmatically associated label for an <a href="../element/input"><code>&lt;input&gt;</code></a> element, this is not good practice. Use a <a href="../element/label"><code>&lt;label&gt;</code></a> instead.</p>
+</div>
+<h2 id="multiline_titles">Multiline titles</h2>
+<div class="section-content"><p>The <code>title</code> attribute may contain several lines. Each <code>U+000A LINE FEED</code> (<code>LF</code>) character represents a line break. Some caution must be taken, as this means the following renders across two lines:</p></div>
+<h3 id="html">HTML</h3>
+<div class="section-content"><div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="rZFoecw5DBZN3D/B8wU0SXjFWo0dXWZT+mKsh8OCdWg=" 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>
+  Newlines in <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> should be taken into account. This
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</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>This is a
+multiline title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+    example span
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+  has a title a attribute with a newline.
+<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>hr</span> <span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pre</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>output<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>pre</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div></div>
+<h3 id="javascript">JavaScript</h3>
+<div class="section-content">
+<p>We can query the <code>title</code> attribute and display it in the empty <code>&lt;pre&gt;</code> element as follows:</p> <div class="code-example">
+<p class="example-header"><span class="language-name">js</span></p>
+<pre data-signature="2sHnmckLz36QaQ/uho1UXgjKK93qj9sT+TaqWr7bLh0=" data-language="js"><span class="token keyword">const</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+output<span class="token punctuation">.</span>textContent <span class="token operator">=</span> span<span class="token punctuation">.</span>title<span class="token punctuation">;</span>
+</pre>
+</div>
+</div>
+<h3 id="result">Result</h3>
+<div class="section-content"><div class="code-example" id="sect1">
+
+<iframe class="sample-code-frame" title="Multiline titles sample" id="frame_multiline_titles" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/title/runner.html?id=multiline_titles" loading="lazy"></iframe>
+</div></div>
+<h2 id="title_attribute_inheritance">Title attribute inheritance</h2>
+<div class="section-content">
+<p>If an element has no <code>title</code> attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.</p> <p>If this attribute is set to the empty string, it means its ancestors' <code>title</code>s are irrelevant and shouldn't be used in the tooltip for this element.</p>
+</div>
+<h3 id="html_2">HTML</h3>
+<div class="section-content"><div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="XhoqRzoi2iLZ/Gv9+XVusZ4VYTtjKOddw8ult7y4U1I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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>CoolTip<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>p</span><span class="token punctuation">&gt;</span></span>Hovering here will show "CoolTip".<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 attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Hovering here will show nothing.<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>div</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div></div>
+<h3 id="result_2">Result</h3>
+<div class="section-content"><div class="code-example" id="sect2">
+
+<iframe class="sample-code-frame" title="Title attribute inheritance sample" id="frame_title_attribute_inheritance" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/title/runner.html?id=title_attribute_inheritance" loading="lazy"></iframe>
+</div></div>
+<h2 id="accessibility_concerns">Accessibility concerns</h2>
+<div class="section-content">
+<p>Use of the <code>title</code> attribute is highly problematic for:</p> <ul> <li>People using touch-only devices</li> <li>People navigating with keyboards</li> <li>People navigating with assistive technology such as screen readers or magnifiers</li> <li>People experiencing fine motor control impairment</li> <li>People with cognitive concerns</li> </ul> <p>This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to <a href="https://inclusive-components.design/tooltips-toggletips/" target="_blank">use a more accessible technique</a> that can be accessed with the above browsing methods.</p> <ul> <li><a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute" target="_blank">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> <li><a href="https://www.tpgi.com/using-the-html-title-attribute-updated/" target="_blank">Using the HTML title attribute – updated | The Paciello Group</a></li> <li><a href="https://inclusive-components.design/tooltips-toggletips/" target="_blank">Tooltips &amp; Toggletips - Inclusive Components</a></li> <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/" target="_blank">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li> </ul>
+</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/dom.html#the-title-attribute">HTML Standard <br><small># the-title-attribute</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>title</code></th>
+<td class="bc-supports-yes">1</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">≤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>
+<tr>
+<th><code>multi-line-support</code></th>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">Yes</td>
+</tr>
+</tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li>
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title"><code>HTMLElement.title</code></a> that reflects this attribute.</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/Global_attributes/title" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title</a>
+  </p>
+</div>