Title

title #

::: section-content The title global attribute contains text representing advisory information related to the element it belongs to. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: title #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Use the title attribute on an iframe to clearly identify the content of the iframe to screen readers.

<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>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} iframe { height: 200px; margin-bottom: 24px; width: 100%; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

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

The title attribute may also be used to label controls in data tables.

The title 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, the title must be a full expansion of the abbreviation or acronym. Instead of using title, 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.

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

Multiline titles #

::: section-content The title attribute may contain several lines. Each U+000A LINE FEED (LF) character represents a line break. Some caution must be taken, as this means the following renders across two lines: :::

HTML #

::: section-content ::: code-example [html]{.language-name}

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

::: :::

JavaScript #

::: section-content We can query the title attribute and display it in the empty <pre> element as follows:

::: code-example [js]{.language-name}

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

::: :::

Result #

::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::

Title attribute inheritance #

::: section-content If an element has no title 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 #

::: section-content ::: code-example [html]{.language-name}

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

::: :::

Result #

::: section-content ::: {#sect2 .code-example} ::: iframe ::: ::: :::

Accessibility concerns #

::: section-content Use of the title 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 to use a more accessible technique{target="_blank"} that can be accessed with the above browsing methods.

Specifications #

::: _table #

Specification #

HTML Standard
[# the-title-attribute]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

                     Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

title 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 multi-line-support Yes 12 Yes Yes Yes Yes Yes Yes Yes No No Yes :::

See also #

::: section-content

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title{._attribution-link} :::

Calendar December 2, 2023
Edit Edit this page