HTML Hot Tip: Create Good Links

This may sound utterly pedestrian, but the best pages have well-designed, useful links. They are easy to find, easy to use, point to the right spot, and integrate into the page contents. Good links take time to create but pay off by helping your visitors make the best use of your pages.

Here are some tips for creating good links:

Make sure they point somewhere

Duh. Of course. But how many sites have you visited with links that are broken? Every author needs to periodically browse their site, clicking each link and seeing where it goes. Your visitors will get a much better feel for your site if every link works and goes somewhere useful.

Make them attractive

I've seen pages where the links are the same color as the surrounding text! Needless to say, using such a page is nearly impossible.

Keep in mind that most browsers let the user configure the appearance of links, at least controlling the use of underlining to denote text links. Moreover, users can usually set their own link colors. If you elect to change those colors in your pages, make sure they are complementary to the overall page and easy to see.

One horrible style that is becoming more popular is to set the unvisited and visited link colors (controlled by the link and vlink attributes to the <body> tag) to the same color. This makes it impossible to tell which links you have already visited in a page. Don't thwart the usability of your pages by making this mistake.

Fit them into the flow of your text

Novice HTML authors create links like this:

Click here to learn more about my site. For additional support, click here. To send mail, click here.

Bleah! This just screams "I learned HTML yesterday!"

The right way to put a link into text is to make it an integral part of the copy:

My site offers a number of resources, including conventional and additional support. If you can't find what you are looking for, send me mail and I'll try to assist you.

Aaahhh. Soothing, real, English sentences that both inform and invite the reader to pursue other links, without looking like a Times Square billboard.

Use images correctly

Images make great links, provided your readers know they are links. If you remove the image border (by adding border=0 to the <img> tag), a reader may not know they can click the image to follow the link. Your image links should invite the reader to click on them. How many times have you visited a page and simply moved your mouse everywhere, looking for a link? Don't turn your pages into a scavenger hunt!

Use the tags correctly

While it is hard to abuse the <a> tag, it is possible to create some visual anomalies on your page when you create image-based links. Specifically, consider this link:

     <a href="doc.html">
     <img src="image.gif">
     </a>

This nice, neat HTML actually creates a link consisting of an image surrounded by two spaces, one or each side. If the user has underlined links, he'll see two little underlines on either side of the image. To avoid the problem, put the tags all on one line:

     <a href="doc.html"><img src="image.gif"></a>

Keep punctuation out of your links

A small thing that drives me crazy: punctuation adjacent to a link is not part of the link. Move those periods, commas, colons, and semicolons out of the <a> tag!

Keep these tips in mind as you create your pages, and your pages and your readers will both benefit. Remember, if it doesn't have links, it isn't part of the web! If your links aren't good, your pages are useless!