In addition to providing descriptive anchor text, it is sometimes helpful to provide additional context to explain links. This context can be particularly helpful when a link contains or consists of an image, icon, or another non-text element.
Additional context can be provided as text using the HTML
title attribute. Although the
title attribute can be provided to any HTML element, it is often extremely useful as additional context or advisory text for clickable elements.
Most browsers will display the text of a
title attribute as a tooltip, meaning when a user hovers their cursor over an element, the text will appear in a small box near the cursor.
To add tooltips to a clickable element like a link, add it as the
<p> <a href="https://www.codecademy.com" title="Codecademy is an online learning platform">Codecademy</a> is the best place to learn to code! </p>
Mouse over the word “Codecademy” below to see this behavior in action!
Codecademy is the best place to learn to code!
Let’s add some clarifying information to links via tooltips and the
title attribute. In index.html, you can find three links within the text of the first question that read “running,” “swimming,” and “biking.” Add a
title attribute to each of these links to describe them.