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 title
attribute.
<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!
Instructions
Let’s add some clarifying information to links via tooltips and the title
attribute. In index.html, you can find a few links inside the text of the first question. Add a title
attribute to these links to describe them.