Browser

Provide more information about HTML elements with the title attribute

Tony Patton looks at the various uses of the title attribute, which allows you to provide additional information about an HTML element. This is especially helpful with HTML forms where tooltips can be used to let the user know what is expected in user input.

 

While the current version of HTML has been around for years, there are various nuances that many developers overlook. These features can be used to enhance an application and developer productivity.

The feature that generated a lot of discussion during one of my recent projects is the title attribute available with most HTML elements. The title attribute allows you to provide the user with a clue to an element's function; this is called a tooltip. Here's a look at the title attribute's various uses.

Standards

The title attribute should not be confused with the title element, which is used to assign a title to a Web page. The title element should be used on all pages, as it is displayed in the browser title bar and is the first element relayed via a screen reader.

<html>

<head><title>Sample Page</title></head>

<body> ...

The title attribute is available in most elements. It is not a new feature; the HTML 2.0 standard describes it as being used to display text prior to accessing a destination resource via an anchor link. You can use the title attribute with all elements except base, basefont, head, html, meta, param, script, and title. Usage is optional; it isn't required for any element.

<a href="http://news.cnet.com/" mce_href="http://news.cnet.com/" alt="CNET News" title="Read the latest news">News</a>

Nowadays, the title attribute is available in most elements along with the anchor, as the following textbox illustrates.

Enter: <input id="sample" type="text" value="enter text" title="Please enter text." />

Tooltips

Given the fact that the title attribute is optional, there are no definitive rules for when it should be used or avoided. The basic premise is to use it to provide additional information that is not essential. This information is often called a tooltip.

A tooltip is a small pop-up window that appears when the mouse pointer hovers over an element. The text disappears when the mouse moves away from the element. Most browsers treat the title attribute in this manner, so the tooltip term has become standard language (although not part of the HTML standard). For this reason, you may want to use the tooltip term when discussing the title attribute with other developers. Tooltips allow you to provide visual clues for page elements, along the lines of pop-up help.

Usage

It is best to keep text short when using the title attribute. One reason why is because most browsers will cut off long text.

I like to use the title attribute to provide more information on links (for instance, where it will take the user) and additional information on other elements. When using optional features like it, you should keep in mind the question of whether the text adds something useful; some long descriptions of images are meaningless to users.

Accessibility

There is some inconsistency among browsers concerning how to support the title attribute. When the title is used to provide tooltips, it does require the use of a mouse or pointing device to provide the necessary functionality. Users with a keyboard will not see the tooltip. Furthermore, screen readers usually have title attributes disabled by default so they are not processed by the reader.

Users may enable title attributes to have them processed. For this reason, do not include the title attribute in your accessibility plans.

Working with images

A quick search of the Web yields lots of discussions of the use of the title attribute with the IMG element. Problems arise since the ALT attribute provides the same functionality in Internet Explorer.

The key issue to remember in this scenario is the ALT attribute is for alternative text (i.e., a description when the image is not available). This is how it is defined in the HTML standard, so use it as a basis for developing a site as opposed to using the browser for design decisions. It is processed by screen readers, so not using the ALT attribute does not meet accessibility guidelines. Most ALT attributes should be empty because they are merely for illustrative purposes.

ASP.NET

If you work with ASP.NET, you may be familiar with the ToolTip property available with most of its Web controls. The following snippet shows it used with the TextBox control.

<asp:TextBox ID="txtTest" runat="server" ToolTip="Enter text here." />

When the page is rendered in the browser, the ToolTip is translated to the title attribute. This is true for all elements. The following snippet shows the previous line's rendered HTML.

<input name="txtTest" type="text" id="txtTest" title="Enter text here." />

Guide the user

Using the title attribute (or tooltips) allows you to provide additional information about an element. This is especially helpful with HTML forms where tooltips can be used to let the user know what is expected in user input. Browser-specific quirks like using the image ALT attribute to provide tooltips is not advised, so just stick with the standard approach.

Do you provide extra information on your pages with tooltips? Are there other lesser known HTML features that you like to use? Share your thoughts with the Web Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

-------------------------------------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

7 comments
us34343434
us34343434

Very interesting - I am just starting to learn htnl so any help I can get would be great

Justin James
Justin James

I hear that IE8 will use the title attribute, not the alt attribute, for the tool tip on images. J.Ja

cerberus40
cerberus40

IE currently uses the title attribute for images (going back to IE5, I think, maybe even earlier); it only uses alt if the image has no title attribute. In fact, you can specify an empty title attribute to turn off tool tips for images that have an alt attribute. What's new in IE8 is that it won't use the alt attribute for a tool tip, whether or not there's a title attribute

Justin James
Justin James

Not using alt anymore is what I also meant to convey, thanks! J.Ja

chris
chris

how come the links in the article don't use the title atribute?

jjt3d
jjt3d

One answer leads to another question. What is "mce_href..."? (Google, DevShed, Webmonkey, Techrepublic, etc. revealed nothing.)

Editor's Picks