TITLE attribute for everything Feb20 '05

Lately, I’ve been using the title attribute on any element I can. For accessibility purposes, I believe it’s a good practice to get in to.

The title attribute can be applied to almost every XHTML element, which is a lot. The most common elements to apply the title attribute to are the <a> element, as well as the <img> element.

Below, I will mention a few other elements that can really benefit from having the title attribute included.

BLOCKQUOTE element

The title attribute can be applied to the <blockquote> element, along with the cite attribute.

Whenever possible, I try to use cite, because it gives the <blockquote> information a distinct source.

For example, let’s say my feedback previews on my blog page are wrapped in <blockquote> tags. This would certainly be appropriate, because the feedback previews are, indeed, quotes from other people or sources.

The XHTML, with the cite and title attributes included, would look something like this:

<blockquote cite="http://www.matthom.com/archive/2005/02/19/01/" title="Feedback thread (PHP – passing variables across pages)"> <a href="/archive/2005/02/19/01/#feedback362" title="Feedback by Josh">"Good article, but one clarification: there ..."</a> <a href="/archive/2005/02/19/01/#feedback363" title="Feedback by Dale">"Passing variables with $_GET and $_POST is ..."</a> </blockquote>

And here’s how it would appear in a browser:

Notice how if you hover over anywhere in the entire width of the blockquote element, you see the title attribute, giving you more information.

And, if you hover over just a single comment in the thread:

... you can see that element’s title attribute, as well – which, in this case, is a list item (<li>).

PARAGRAPH element

Depending on the context, you may find yourself wrapping distinct information inside  elements.

For example, on my blog page, I have my entry headlines in <h3> elements, and the date published (right below it) in  elements. This was just the semantic choice I made.

So, why would I need a title attribute for the date published?

Let’s say, for instance, you’d like your date published to show the time since the initial posting of the entry.

Then, when someone hovers over that text, the title attribute would take over, and show you the exact date and time, for those who care to know:

As you can see, when you hover over the "time since," you receive a tooltip, telling you the exact date and time published.

The bottom line

Using the title attribute can greatly increase usability and accessibility. It should be used whenever possible.

Categories: Accessibility , Semantics , Web Development , XHTML

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

I totally agree with you on this. I took a (very) short course on ADA compliancy a few weeks back and they harped on how important both the t ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.