title global attribute contains and can display the specified information about the element it belongs to.
Note: Although the
titleattribute can display additional information on the screen, it does not work with touch screens and keyboard-only navigation. Using the
titleattribute is especially important for assistive technologies to help provide a user-friendly browsing experience.
<opening-tag title="text"> content </closing-tag>
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
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:
titlemust contain a description or expansion of the abbreviation.
titleshould 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">: The
titlespecifies the default and alternate stylesheets.
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: