The title
attribute in HTML
The title attribute provides a description or other information for an HTML element, such as:
- a description of the target resource for a hypertext link
- the term being defined in a dfn element
- a description of an image referenced in an <img/> tag
- a comment about a quotation or citation
- the name of an alternative style sheet
- a description of the time represented by a time element
Many web browsers take the text in the title attribute and display it in a pop-up tool tip when the mouse is held over content with a title.
For most HTML elements, the value of the title property is inherited from the parent element or the closest ancestor with a title unless the title attribute is coded on the element. A value of an empty string (title=""
) indicates there is no title for the element. Line breaks in the title
attribute are preserved. Therefore, the title should not be split across multiple lines.
Examples
Image link
<a href="http://www.ExampleOnly.com/todos/take-out-trash.html" title="Take out the trash"> <img src="/images/trash-can.png" alt="trash can"/> </a>
When the a element and img element represent the same resource or event, the title attribute should be put on the outermost element, which in this case is the hypertext link created by the <a> tag. Since there is no title attribute on the <img> tag, the value of the title property of the img element will be inherited from the title property of the a element.
Link with image and text
<a href="http://www.ExampleOnly.com/todos/take-out-trash.html" title="Take out the trash"> <img src="/images/task-not-done.png" alt="task not done" title=""/> Take out the trash</a>
In this case, the a element represents a different resource (a task in a "To Do" list) than the image element (the status of the task). Therefore the title property of the img element should not be inherited from the <a> tag, which requires coding the title attribute on the <img/> tag. The value of the title property is an empty string since the <img alt> attribute provides the description of the image.