Siolon

Creating Rich Anchor Tags

The most impor­tant, and yet often under-valued tag in XHTML, has to be the anchor tag. It’s usu­ally one of the first tags learned in XHTML, and it is usu­ally because of its impor­tance. Imag­ine if the anchor tag didn’t exist: there would be no “surf­ing,” users could only browse the Inter­net with the address bar, and ulti­mately the web would be a lot less interesting.

There are some good prac­tices in cre­at­ing these tags, and that is the premise of this short tuto­r­ial. I want to empha­size mean­ing­ful links, acces­si­ble links, and well-formed links.

Cre­at­ing Mean­ing­ful Links

Wikipedia has for­ever changed the way we nav­i­gate. Notice that the soft­ware that runs the appli­ca­tion (Medi­aWiki) does not have a full left/right nav­i­ga­tion. There are some links, a search box, and the user is ulti­mately led to browse the site by fol­low­ing links in the con­tent. How often have we seen a link that looks some­thing like this?

For more infor­ma­tion please click here.

One is left to won­der what “click here” means or where it goes. It is an awful, anti­quated man­ner to dis­play anchors. Instead, we should nat­u­rally con­tent in the flow of the doc­u­ment. The anchors nat­u­rally show in the flow of the doc­u­ment that clearly shows where the anchor will take me and what the con­tent is.

More infor­ma­tion can be found on our prod­uct infor­ma­tion page.

Cre­at­ing Acces­si­ble Links

We also want to cater to our users who have acces­si­bil­ity needs. In rela­tion 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 prop­erty 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>

Cre­at­ing 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>

Con­clu­sion

The anchor tag is a pow­er­ful tag that is, along with HTTP, the back­bone of the user expe­ri­ence of the web. Cre­at­ing mean­ing­ful, acces­si­ble, and well-formed anchors will do won­ders to ensure that your anchors are intu­itive and usable to the great­est amount of users.