HTML and CSS Reference
In-Depth Information
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.
