Creating Rich Anchor Tags

The most important, and yet often under-valued tag in XHTML, has to be the anchor tag. It’s usually one of the first tags learned in XHTML, and it is usually because of its importance. Imagine if the anchor tag didn’t exist: there would be no “surfing,” users could only browse the Internet with the address bar, and ultimately the web would be a lot less interesting.

There are some good practices in creating these tags, and that is the premise of this short tutorial. I want to emphasize meaningful links, accessible links, and well-formed links.

Creating Meaningful Links

Wikipedia has forever changed the way we navigate. Notice that the software that runs the application (MediaWiki) does not have a full left/right navigation. There are some links, a search box, and the user is ultimately led to browse the site by following links in the content. How often have we seen a link that looks something like this?

For more information please click here.

One is left to wonder what “click here” means or where it goes. It is an awful, antiquated manner to display anchors. Instead, we should naturally content in the flow of the document. The anchors naturally show in the flow of the document that clearly shows where the anchor will take me and what the content is.

More information can be found on our product information page.

Creating Accessible Links

We also want to cater to our users who have accessibility needs. In relation to the topic above, how much would a screen reader the user with: “please click here.” We could also give it a CSS 2 aural property to set off the link with a short pause.

a {
pause: 20ms;
}

We also want to give it a title to improve the accessibility.

<a href="http://address/" title="Product Information Page">product information page</a>

Creating Well-Formed Links

The last thing is to ensure that our code aligns with the rigours of XHTML. Here is a bad example:

<em><a href="http://address/">text</em></a>

When we apply the rules of XHTML we get the following:

<em><a href="http://address/" title="title">text</a></em>

Conclusion

The anchor tag is a powerful tag that is, along with HTTP, the backbone of the user experience of the web. Creating meaningful, accessible, and well-formed anchors will do wonders to ensure that your anchors are intuitive and usable to the greatest amount of users.