Anchors (hyper text links)

Anchor from the carferry "Milwaukee"

Anchors are HTML tags that are used to provide clickable links that can go to a different web page or site or to jump to a section of a page. Try the link below (click on the underlined text) then click your browser's back button to return here:

kgraff.net home page

This is the HTML code the link above uses:

<a href="http://kgraff.net/">kgraff.net home page</a>

To provide a target within a page for clickable links, make a named anchor anywhere outside a table:

<a name="tactics"></a>

Then create the link:

<a href="#tactics">tactics</a>

Click the link below to jump to the next topic:

tactics

Named anchors can also be used to go to specified sections on other pages, just list the relative or full URL before the # sign in the anchor tag. For example:

<a href="anchors.shtml#tactics">tactics</a>
<a href="http://kgraff.net/it/tips/anchors.shtml#tactics">tactics</a>

Images can be used as links (try clicking on the photograph of the anchor above), by enclosing the IMG tag inside an anchor. Images can be especially effective if they look like buttons:

<img src="images/home.gif" alt="Home button" width="50" height="16" hspace="4" vspace="4">

For this tag, I used the image size I specified when I created it for the width and height parameters. The hspace and vspace paramaters I chose to add some space around the image.

If you are proficient in using graphics programs, making custom buttons can be as simple as filling a shape with the color you want, applying a bevel and emboss effect, adding text, then saving the graphic as a JPEG, GIF, or PNG file. Be sure to specify an alt value in your image tag so that users of text-only browsers can identify the link.

Sometimes square brackets are used to indicate links:

[kgraff.net home]

Tactics

The browser default for showing text links is underlining and a different color. The idea is to provide predictable visual cues for recognizing links. On this site, I use the browser default with the exception of choosing custom colors and bolding the font face in my style sheet.

Below is a link to my home page, but with text decoration turned off. It looks just like the other text, so you have to actually move the pointer over it to see it turn into a hand to recognize the words are a link.

kgraff.net home page

For some pages, the challenge of finding hidden links is part of the experience. Unfortunately, sometimes designers do this to make their web pages look like print media without regard for the needs of users.

This can be less confusing if you have otherwise identified undecorated text as links, such as table that is identified as containing links.

My link examples
kgraff.net home page
Needlework

I have also specified that the color changes when the pointer hovers over the links in the table above to give an additional visual cue.

Table cells can be made to look like buttons, but people may be inclined to try to click somewhere inside the cell border.

  kgraff.net home page         Needlework    

In the example above, clicking on the blue or green areas only works if the pointer is directly over the text.

web design * database * Macintosh OS X * Linux * UNIX