Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

HTML title global attribute

BaselineWidely available

Thetitleglobal attribute contains text representing advisory information related to the element it belongs to.

Try it

<p>  Use the <code>title</code> attribute on an <code>iframe</code> to clearly  identify the content of the <code>iframe</code> to screen readers.</p><iframe  title="Wikipedia page for the HTML language"  src="https://en.m.wikipedia.org/wiki/HTML"></iframe><iframe  title="Wikipedia page for the CSS language"  src="https://en.m.wikipedia.org/wiki/CSS"></iframe>
iframe {  height: 200px;  margin-bottom: 24px;  width: 100%;}

The main use of thetitle attribute is to label<iframe> elements for assistive technology.

Thetitle attribute may also be used to label controls indata tables.

Thetitle attribute, when added to<link rel="stylesheet">, creates an alternate stylesheet. When defining an alternative style sheet with<link rel="alternate"> the attribute is required and must be set to a non-empty string.

If included on the<abbr> opening tag, thetitle must be a full expansion of the abbreviation or acronym. Instead of usingtitle, when possible, provide an expansion of the abbreviation or acronym in plain text on first use, using the<abbr> 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.

Whiletitle can be used to provide a programmatically associated label for an<input> element, this is not good practice. Use a<label> instead.

Multiline titles

Thetitle attribute may contain several lines. EachU+000A LINE FEED (LF) character represents a line break. Some caution must be taken, as this means the following renders across two lines:

HTML

html
<p>  Newlines in <code>title</code> should be taken into account. This  <span    title="This is amultiline title">    example span  </span>  has a title a attribute with a newline.</p><hr /><pre></pre>

JavaScript

We can query thetitle attribute and display it in the empty<pre> element as follows:

js
const span = document.querySelector("span");const output = document.querySelector("#output");output.textContent = span.title;

Result

Title attribute inheritance

If an element has notitle attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.

If this attribute is set to the empty string, it means its ancestors'titles are irrelevant and shouldn't be used in the tooltip for this element.

HTML

html
<div title="CoolTip">  <p>Hovering here will show "CoolTip".</p>  <p title="">Hovering here will show nothing.</p></div>

Result

Accessibility concerns

Use of thetitle attribute is highly problematic for:

  • People using touch-only devices
  • People navigating with keyboards
  • People navigating with assistive technology such as screen readers or magnifiers
  • People experiencing fine motor control impairment
  • People with cognitive concerns

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 touse a more accessible technique that can be accessed with the above browsing methods.

Specifications

Specification
HTML
# the-title-attribute

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp