HTML and CSS Reference
Web page fit and finish
Can you say “web career”? You've certainly delivered everything the
Starbuzz CEO has asked for, and you've now got a high-profile website
under your belt (and in your portfolio).
But you're not going to stop there. You want your websites to have that
professional “fit and finish” that makes good sites into great ones. You're
going to see lots of ways to give your sites that extra “polish” in the rest of
this topic, but let's start here with a way to improve your links.
Improving accessibility by adding a title to your links
Wouldn't it be nice if there were a way to get more information about the link
you're about to click on? This is especially important for the visually impaired
using screen readers because they often don't want the entire URL spoken to
them: (“h” “t” “t” p” “:” “slash” “slash” “w” “w” “w” “dot”), and yet the link's
label usually only gives a limited description, like “Caffeine Buzz.”
The <a> element has an attribute called title just for this purpose. Some
people are confused by this attribute name because there's an element named
<title> that goes in the <head> . They have the same name because they are
related — it is often suggested that the value of the title attribute be the same
as value of the <title> element of the web page you are linking to. But that
isn't a requirement and often it makes more sense to provide your own, more
relevant description in the title attribute.
Here's how you add a title attribute to the <a> element:
Read the <a href="http://wickedlysmart.com/buzz"
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
The title element has a value that is a textual
desc ription of the page you are linking to.
Now that we've got a title attribute, let's see how your visitors would make use of it. Different
browsers make different use of the title, but many display a tool tip. Add the changes above to
your “index.html” file and reload the page to see how it works in your browser.