title
The title
global attribute contains and can display the specified information about the element it belongs to.
Note: Although the
title
attribute can display additional information on the screen, it does not work with touch screens and keyboard-only navigation. Using thetitle
attribute is especially important for assistive technologies to help provide a user-friendly browsing experience.
Syntax
<opening-tag title="text"> content </closing-tag>
The title
attribute can be used with any HTML element
by adding the attribute to the opening tag. The text
value of the attribute can be any string, including empty string (""
) and multi-line text. This text
will appear next to the element as a tooltip text (hint) while hovering over the element it is used with.
For nested elements, the title
attribute will be inherited from the parent element if the child element has no title
attribute.
Special Use Cases
While any element can have a title
attribute, it provides a special function for some elements. When the title
attribute is used with:
<abbr>
: Thetitle
must contain a description or expansion of the abbreviation.<iframe>
: Thetitle
should describe the embedded content for assistive technologies.<input>
: This element only displays information when a user is hovering over the element. It is better to use a<label>
element that is always visible.<link rel="stylesheet">
: Thetitle
specifies the default and alternate stylesheets.
Example
In the example below, the <p>
element uses a title
attribute to provide further information about the text in the paragraph:
<p title="Also known as water bears or moss piglets.">Tardigrades can survive some of the harshest conditions.</p>
This results in a tooltip with the specified text appearing next to the paragraph while hovering over it:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.