Definition and Usage

The title attribute represents advisory information about the element, such as guidance or descriptive notes.
In some desktop browsers, this information is displayed as a tooltip. The value of the attribute is text.

The title attribute is a global attribute that can be applied to any HTML element.

Features

  • On links, it can serve as a title or provide a description of the target resource.
  • On images, it can provide image credits or supplementary information about the image.
  • On paragraphs, it can serve as a footnote or commentary on the text.
  • On interactive content, it can provide a label or instructions for using the element.
  • It provides advisory information to enhance accessibility of other web content.

Practical Examples

Let's explore the features of the title attribute through practical examples.

Usage on Links

On links, the title attribute can provide additional description or a title for the target resource. The following example shows how the attribute conveys advisory information about the link's destination:

HTML 
<a href="https://www.example.com" title="Go to the official website">Example Website</a>

Usage on Images

For images represented with the <img> tag, the title attribute can provide important supplementary information or image credits:

HTML 
<img src="example.jpg" alt="Example image" title="Additional information about this example image">
Notes on Using title on Images
  • The title attribute cannot replace the alternative text provided by the alt attribute.
  • Avoid using the same text from the alt attribute in the title attribute. Doing so may cause screen readers to read the same content twice, confusing users who rely on assistive technology.
  • Do not use the title attribute to provide captions, headings, or legends for images. If an image requires descriptive content, use the <figure> and <figcaption> tags instead.
  • Use the title attribute for images only when supplementary information is needed.

Usage on Paragraphs

On paragraphs, the title attribute can provide footnotes or commentary on the text:

HTML 
<p>Let's learn <abbr title="Hypertext Markup Language">HTML</abbr> in a fun and easy way!</p>

Code Explanation
The <abbr> tag is used to represent abbreviations.
When used with the title attribute, it clearly shows the full meaning of the abbreviation.

Usage on Interactive Content

For interactive elements, the title attribute can provide a label or instructions for using the element:

HTML 
<button title="Click this button to confirm.">Confirm</button>

Advisory Information for Accessible Content

It also provides advisory information to enhance accessibility, helping users understand and interact with web content via screen readers or other assistive technologies:

HTML 
<div title="This section is important.">
    <p>This part of the page contains key content.</p>
</div>
HTML 
<iframe title="Wikipedia page about HTML language" src="https://en.wikipedia.org/wiki/HTML"></iframe>

These examples demonstrate how the title attribute can be applied across various HTML elements. It is a useful tool for providing additional information to users and improving the accessibility of web pages.

Purpose of the title Attribute

The title attribute represents advisory information about an HTML element, such as guidance or descriptive notes. Its main purposes include:

Using Tooltips

The title attribute is often used to provide a tooltip for an element. When a user hovers their mouse over the element, the browser displays the text specified in the title attribute as a tooltip, providing additional information or explanation about the element.

However, there are some important considerations when using the title attribute for tooltips:

  • Users on touch-based devices, such as smartphones or tablets, may not see tooltips.
  • Users who rely on a keyboard or have fine motor skill limitations may also not access tooltips.

In these cases, relying solely on the title attribute is not recommended.

You may consider creating custom tooltips using CSS or JavaScript. These methods can display tooltips when a user touches the element, navigates with the keyboard, or uses assistive technologies.

Improving Web Accessibility

The title attribute can help improve the accessibility of a web page. Users with visual or functional limitations, particularly those using screen readers, can obtain information about elements through the title attribute.

However, the title attribute should be used judiciously in certain situations:

Providing Redundant Information on Link Text

It is unnecessary to repeat information that is already present in the link text itself. This redundancy adds noise for the user and should be avoided.

HTML 
<a href="newsletter.pdf" title="Newsletter">Newsletter</a>
Repeating Explicitly Associated Control Labels

Repeating the visible label of a control element adds cognitive noise for users without providing additional value.

HTML 
<label for="user-name">Name</label>
<input type="text" title="Name" id="user-name">

Code Explanation
The <label> tag represents a text label (or caption) for user interface control elements.

If it is impossible to provide a <label> for a control element, the title attribute can be used to add a label:

HTML 
<input type="text" title="Name" id="user-name">
Using aria-label or aria-labelledby for Screen Readers

For screen reader users, it is better to provide label text using aria-label or aria-labelledby rather than relying on the title attribute. These ARIA attributes improve accessibility. See the references below:

HTML 
<label for="user-name">Name</label>
<input type="text" id="user-name" aria-label="Enter your name">

Providing Additional Information

The title attribute can provide supplementary information for various elements, such as image credits, link destinations, paragraph footnotes, citation sources, or button actions.

HTML 
<p>
  The <dfn title="Hypertext Markup Language">HTML</dfn> is a standard
  markup language used to create web pages.
</p>

Code Explanation
The <dfn> tag indicates a term being defined.
When combined with the title attribute, it specifies the exact definition for the term.

HTML 
<p>
    <abbr title="Monday">Mon</abbr>,
    <abbr title="Tuesday">Tue</abbr>,
    <abbr title="Wednesday">Wed</abbr>,
    <abbr title="Thursday">Thu</abbr>,
    <abbr title="Friday">Fri</abbr> are weekdays.
</p>

Code Explanation
The <abbr> tag is used to represent abbreviations.
When used with the title attribute, it clearly shows the full meaning of the abbreviation.

The title attribute plays a key role in enhancing user experience and improving web accessibility. When used correctly, it helps clearly communicate content and provides necessary information to users.

Browser compatibility

Browser compatibility for the title Attribute
Attribute
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
title 1 12 1 4

Specifications

Specification for the title Attribute
Specification
title HTML Standard
#the-title-attribute

References

See also