1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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>
|
