diff options
Diffstat (limited to 'devdocs/html/global_attributes%2Ftitle.html')
| -rw-r--r-- | devdocs/html/global_attributes%2Ftitle.html | 130 |
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><iframe></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><link rel="stylesheet"></code></a>, creates an alternate stylesheet. When defining an alternative style sheet with <code><link rel="alternate"></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><abbr></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><abbr></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><input></code></a> element, this is not good practice. Use a <a href="../element/label"><code><label></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"><</span>p</span><span class="token punctuation">></span></span> + Newlines in <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> should be taken into account. This + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + example span + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + has a title a attribute with a newline. +<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>hr</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></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><pre></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"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hovering here will show "CoolTip".<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 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">></span></span>Hovering here will show nothing.<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>div</span><span class="token punctuation">></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 & 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"> + © 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/Global_attributes/title" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title</a> + </p> +</div> |