HTML title Attribute

😄 This post is based on the content from coding.courses.

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

# Usage on Links

On links, the title attribute can provide additional description or a title for the target resource.

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

<img src="example.jpg" alt="Example image" title="Additional information about this example image">

# Usage on Paragraphs

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

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

# Usage on Interactive Content

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

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

<div title="This section is important.">
    <p>This part of the page contains key content.</p>
</div>

<iframe title="Wikipedia page about HTML language" src="https://en.wikipedia.org/wiki/HTML"></iframe>

Purpose of the title Attribute

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

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

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

References

HTML title Attribute – Proper Understanding and Usage - codingCourses

The title attribute represents advisory information about the element, such as guidance or descriptive notes.

coding.courses