1. Technology
Send to a Friend via Email

Your suggestion is on its way!

An email with a link to:

http://webdesign.about.com/od/htmltags/a/aa101005.htm

was emailed to:

Thanks for sharing About.com with others!

The Title Attribute

Creating Tool Tips with the HTML Title Attribute

By

Female interior designer working in an office.
vgajic/Vetta/Getty Images

If you've been writing HTML for more than a couple of days, you should already know about the <title> element. But the title attribute may be new to you. This handy little HTML attribute works on several XHTML elements as a way to annotate your documents for your readers. In fact, the title attribute can be used on nearly every XHTML element to provide more information for your readers. (For details on which elements it is not valid in, please review the title attribute documentation.)

Annotating XHTML

Most modern browsers (Netscape 6+, Mozilla 1+, IE 5+, Opera 7+, Safari 1+) support titles on elements like images and links by displaying tool tips or within the properties of the element. If you hover your mouse over a link that includes a title, the title will display in a small box next to the mouse.

Some browsers, rather than displaying a tool tip, provide the title as part of the properties of the element. If your browser does this, you will need to right-click or click and hold on the link or image to get the alternate menu. At the bottom of the menu will be the option for "Properties". When you choose this, you will see the element's title. Try it yourself. Place the following text on a Web page and then view it in a Web browser:

<a href="http://webdesign.about.com/" title="Learn Web Design Here!">About Web Design/HTML</a>

Why Use Title Attributes

There are lots of good reasons to use the title attribute.

  1. Accessibility
    The more information you provide about images, links, and other elements on your page, the more accessible your pages will be. And this isn't just for visually impaired customers, either. Titles make elements more accessible for everyone because they provide more information about the element. If a customer is going to click on a link, knowing where it's going is a huge help. And an image that might otherwise be somewhat opaque or confusing can be instantly clarified by a title.

  2. Search Engine Optimization
    Title attributes are a completely valid way to get additional content onto your pages that won't disturb your customers a lot, but will be picked up by search engines. Keep in mind that the title attribute information will be seen by your readers, so don't use it to spam the search engines with your search terms. That could get you banned by the search engines, and will be annoying to your readers.

  3. Annotations
    Sometimes, you don't want your links to say too much about where the link is going. For example, when you're linking within the content of your document. In that case, a title on the a tag will help your customers know where the link is going without disturbing the flow of your text.

  4. CSS Hooks
    If you want to call out elements that have titles on them, you can set up CSS styles defined to match only elements with the title attribute. For example, this style will make all a tags with a title red:
    a[title] { color : #f00; }
    More about CSS and the Title Attribute

  5. Special Features
    Because most browsers support the title attribute as a tool tip when the mouse pauses over it, you can provide additional information on those items without actually creating a link. For example, if you want to define unclear words or jargon within your document, you could put a span tag around the jargon term and use the title attribute to define it:
    <span title="HyperText Markup Language">HTML</span>
    Keep in mind, however, that most browsers right now only support tool tip functionality on images and anchors (links). If you want to do it with a link, you can make it a non-underlined, non-clickable link like this:
    <a href="#" onclick="return false;" title="HyperText Markup Language" style="text-decoration:none;">HTML</a>

©2014 About.com. All rights reserved.