Using the Title Attribute with HTML Elements
The title attribute, a HTML attribute that is sometimes misused and other times not used enough. Used properly the title attribute can add accessibility, usability and search engine optimization benefits to your web pages.
What is a Title Attribute?
The title attribute is a bit of coding added to HTML elements (tags) which provides additional information related to the element when a user places their mouse over the element or assistive technology reaches it as it works it way through the document.
Where Can I Use the Title Attribute?
In the HTML 4.01 specification, the title attribute cannot be used for the base, base font, head, HTML, meta, param, script and title elements/tags. That makes sense, these elements are not seen by the visual users.
As of this writing, w3schools title attribute page says:
In HTML5, the title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
Note: HTML5 is not a standard yet. Things can change between now and then.
Useful Places to Use the Title Attribute
For now, let’s concentrate on the places where you can use the title attribute that increases the accessibility (see quote below), usability and search engine optimization of your web pages.
I used the most popular commercial screenreader JAWS and the most popular free alternative NVDA. It was an incredibly enlightening experience and I learned a lot (here’s a list of what I learned). One of the main things I noticed is that the title attribute isn’t read aloud, AT ALL.
There’s an option in JAWS that allows you to read title text instead of the normal anchor text, but it’s not enabled by default. The only very tiny exception a title attribute will be read is if there’s absolutely no link anchor text, and that’s rare. Even if the link wraps an image, the screenreader will chose to read the image’s alt text instead of the title attribute.
I thought title text improved accessibility. I was wrong.
Below are a few of the more common HTML elements (tags) used in day to day web page creation and blogging:
-
A
The A element is the tag you use to create a link. It is also refered to as the anchor tag.
<a href="http://www.domainname.com/page-name.htm" title="Info about where they will go/see if they click this link">This is a link</a> -
ABBR
The abbreviation element used around an abbreviation you use in your page. Some readers might not know what that stands for. You can let them know by using the title attribute.
Inc. (mouseover the abbreviation and see)
<abbr title="Incorporated">Inc.</abbr> -
ACRONYM
The acronym element used around an acronym helps those who are not familiar with the acronym understand what it means.
SEO
<acronym title="Search Engine Optimization">SEO</acronym>Note: In HTML5 the abbr element will represent an abbreviation or acronym.
-
AREA
The area element is used in conjuction with the map element when an image map is used.
<area href="http://www.yourdomainname.com/page-name.htm" title="Describe where they will go if click the area" alt="description of the area on the image map" shape="rect" coords="184,0,276,28"> -
BUTTON
As the name descibes the button element creates a button that when clicked something happens.
<button name="reset" value="reset" type="reset" title="Reset form to original values">Reset form <img src="/icons/reset.gif" alt="Reset"></button> -
CITE
The cite element is used with the blockquote set of tags to provide the link where the quotation was taken from.
<blockquote cite="http://www.domainname.com/page-name.html" title="Title of page where the quoation was taken from">Note: In HTML5 the purpose of the cite tag will change:
Although previous versions of HTML implied that the cite element can be used to mark up the name of a person, that usage is no longer considered conforming. The cite element now solely represents the cited title of a work; for example, the title of a book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, theater production, play, opera, musical, exhibition, legal case report, or other such work.
As you can see from the quote above from the HTML5 specifications that is not very useful if you wanted to read the quote yourself. (hover you mouse over the quote above) Add to the usability of your quotes by including the source link within the blockquote set of tags or just below the blockquote. Same quote improved:
Although previous versions of HTML implied that the cite element can be used to mark up the name of a person, that usage is no longer considered conforming. The cite element now solely represents the cited title of a work; for example, the title of a book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, theater production, play, opera, musical, exhibition, legal case report, or other such work.
Source: HTML: The Markup Language (an HTML language reference) – Cite
W3C Working Draft 11 October 2012 -
CODE
We have been using the code element to designate lines in this article as the code example for the element discussed. You will notice we also have included the title attribute in our examples for better usability and accessibility. Below is an example of the coding we used for a code example above:
<code title="Opening blockquote tag with cite element and title attribute"><blockquote cite="http://www.domainname.com/page-name.html" title="Title of page where the quoation was taken from"></code> -
IMG
The img tag already requires an alt attribute to describe the image however if the image is clickable (has an anchor set of tags around it) then you should add a title attribute to the link.
Image coding example:
<img src="https://www.webpagemistakes.ca/images/image-alt-tag-example.png" alt="Image alt tag - Image alt attribute example" width="225" height="205" />Same image made clickable:
<a href="https://www.webpagemistakes.ca/image-alt-tags/" title="Image Alt Tag – Image Alt attribute"><img src="https://www.webpagemistakes.ca/images/image-alt-tag-example.png"
alt="Image alt tag - Image alt attribute example" width="225" height="205" /></a>
Search Engine Optimization and the Title Attribute
This is what Google says regarding the title attribute:
…The “title” attribute is a bit different: it “offers advisory information about the element for which it is set.” As the Googlebot does not see the images directly, we generally concentrate on the information provided in the “alt” attribute. Feel free to supplement the “alt” attribute with “title” and other attributes if they provide value to your users!…
Official Google Webmaster Central Blog: Using ALT attributes smartly
Bing however does tell you to use the title attribute on your internal links:
…To further develop keyword relevance for those pages, also include the title attribute to your anchor tags….
…Think of the anchor text as your primary description of the linked page. But if you do inline linking within the paragraphs of your body text, you need to maintain the natural, logical flow of the language in the paragraph, which can limit your link text description. As such, you can use the title attribute to add additional keyword information about the linked page without adversely affecting the readability of the text for the end user….
Source: Making links work for you (SEM 101) Bing Webmaster Center Blog (scroll down to Use title attribute in anchor tags for internal links)
That Does Not Mean Keyword Stuff the Title Attribute
Some SEOs abuse the title attribute (just like the alt attribute) as a place to stuff keywords. Remember the purpose of the title attribute is to provide more information.
The Indirect SEO Benefit of the Title Attribute
The search engines all say write for your readers not the search engines. With this in mind, if you include the title attribute in the appropriate places this improves the accessibility and usability of your website or blog which can snowball into indirect search engine optimization improvements through organic incoming links. i.e. People will spread the word on social networking sites and on their own sites about how great your site is.
Use the Title Attribute to Improve Visitor Experience
Don’t worry about whether there is a direct search engine optimization benefit from using the title attribute. Use the title attribute to improve your visitor’s experience. The indirect benefits of providing a great experience for your visitors can greatly out weight and tricks to manipulate the search engine results.
Got some more places where improved accessibility and usability can be gained by using the title attribute? Give us your ideas in the comments below.
Copyright © 2005 - 2024 Web Page Mistakes. All rights reserved.
What's next?
Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:
