Title - HTML Attribute

The title attribute can be used to show users a tool tip when they point at an element with their mouse.

1078 views

Edited: 2018-01-03 12:13

The HTML title attribute is used for advisory information on elements.

When the title attribute is used on links, this could be a short description to explain to the user, what will be found on the linked page. Information from the attribute will be shown in a small tool tip when users point at the link with the mouse.

You can use line feed (U+000A) characters to split the title into multiple lines.

How to use the title attribute

The attribute can be applied to relevant elements as needed. When used on links this is done like so:

<a href="https://beamtic.com/html-title-attribute" title="Reference on the title attribute, including examples.">About the Title Attribute</a>

It can also be used on abbr elements for abbreviations. I.e.

<p>This tutorial is about the <abbr title="HyperText Markup Language">HTML</abbr> title attribute.</p>

Problems with touch devices and keyboard only users

The title attribute will generally be displayed when the element is hovered with a pointing device, such as the mouse. However, many user agents doesn't support the attribute very well, mainly when it comes to touch-devices, or keyboard-only users. As a result, these users will not benefit from the information available in the title.

Conclusion

Currently it might be best if the information made available trough the title is not required by the user to understand the page. A better option when displaying a list of links, could be to display the description next to the link, like shown in the below example.

<ol>
 <li><a href="https://beamtic.com/some-page">Some page</a> – external link</li>
</ol>

Tell us what you think: