WebDevLounge | design, development, SEO and wordpress | articles, discussion and community

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Maybe not the sexiest or most glamorous topic for a blog post – but interesting nonetheless – the hyperlink is possibly the most commonly used of the HTML elements, and probably the most overlooked.

Have you ever stopped to think whether or not your links are actually living up to their full potential? Are they usable, accessible, effective and efficient? Probably not as much as you think.

This article will explore the intricacies of the hyperlink and how to make the most of the humble <a> tag.

1) Underlines

If you have a paragraph with links dotted in and among the copy they need to be identified as soon as possible by the user. The best way of doing this is to underline them. Target all paragraph links using:

p a{
     text-decoration:underline;
 }

This will make all links inside paragraphs underlined, and you can add further CSS rules to the above to expand the aesthetics and appearance of the links too. I would suggest removing the underline on hover to indicate the clickability (new word).

Underlining anything that isn’t a link is a big no-no, especially if it is in a body of text. People expect to be able to click it, and get mighty annoyed when they can’t!

The rules can be bent slightly with hyperlinks that either aren’t in long passages of text, or are obviously meant to be clicked (e.g. main navigations).

2) Colour

Colouring links consistently throughout your pages will massively increase their identification and ease of use. Keep all links contained in paragraphs the same colour, all links in your sidebar the same colour and the links in your footer, um, the same colour I guess.

Changing link colour on hover is an arbitrary decision; I would recommend that if you don’t remove the underline on a user hovering the link that you do alter the colour to indicate some level of interaction.

3) Cursors

This applies not just to links but anything that’s clickable – do not alter the cursor! Anything that can be clicked (especially links) should have the pointer cursor (literally give it the finger). Under no circumstance should you apply another form of element to a clickable element. I suggest adding this to your CSS file:

a, button, input[type="submit"], input[type="reset"]{
		cursor:pointer!important;
	}

This will give all your hyperlinks, buttons and submit/reset form elements a more logical cursor, indicating that they can (and should) be clicked.

4) Target

I mentioned this in [link]my previous article[/link], but please refrain from using the target (target=”_blank”) attribute on your links. This interrupts users’ workflow and also won’t validate under the Strict DOCTYPE.

If for whatever reason you are required to use the target=”_blank” attribute then you may want to use the following CSS to automatically indicate that a new window will be opened:

a[target^="_blank"]{
	color:#f00;
	padding-right:12px;
	background:url(new-window.gif) bottom right no-repeat;
}

Where new-window.gif is a small arrow 10×10px wide – it will be shown on the far right of the link.

5) Title

This is a win-win situation in terms of both accessibility/usability and SEO. Some browsers (particularly those for disabled users) can bring up a list of links within a certain page – if you haven’t given each of these links a title attribute all the user will have to go on is the actual text of the link, and the location URI. Compare the following:

<a href="//csswizardry.com/">CSS Wizardry</a>

vs.

<a href="http://csswizardry.com/" title="CSS">CSS Wizardry</a>

It’s fairly obvious which one is the more accessible link. Users who isolate the links through their browsers get a description, and users who use their browser normally get a nice little tooltip telling them where the link they are about to click is going to take them.

I mentioned SEO benefits as well… Search engines spidering the second link will be able to give me a bit more weight in the SERPs for those keywords – SEs love keyword rich title tags (and alts but that’s another story).

6) Wording

In a similar vein as the above, the correct wording of your links has both accessibility and SEO benefits. For example:

For cheaper car insurance <a href="cheaper.html">click here</a>.

vs.

<a href="cheaper.html">Get cheaper insurance</a>!

When isolated, the first link simply reads “click here”, whereas the second reads “Get cheaper insurance”.
The latter is better practice in that it is a) a better call to action, b) a more accessible description of the links purpose and c) it’s got an infinitely meatier keyword count.
Note that I didn’t use the title attribute purely and simply so as not to over complicate things. A real life perfect example would be:

<a href="cheaper.html" title="Get Cheaper Car Insurance">Get cheaper insurance</a>!

7) Lists of links

If you ever make a list entirely of links, give each “li a” a bit of padding and display:block;. The reason for this is if you have a list of varying length links which are all stacked one above the other, users with motor handicaps may struggle navigating their mouse/pointing device over such cramped items:

ul li a{
		padding:2px;
		display:block;
}

See the demo.

Accesskeys

Accesskeys are a great way to allow users to navigate a site. They are used most often on critical links, i.e. your main navigation. They aren’t as important on outbound links to other sites you are referencing or smaller less important pages in your own site.

<a href="index.html" title="Return to the Home Page" accesskey="1">Home</a>

Also, they only need defining once per page. Say you have three links to your home page on your contact page, you need only define the accesskey to any one of those links.

In most browsers you hold Alt+accesskey. In Firefox you hold Shift+Alt+accesskey.

9) Keyboards

A lot of users have/choose to navigate with their keyboards. The issue this poses is that the :hover pseudo-class isn’t utilized by keyboard navigation, so any user tabbing through will not see any change in the link’s state when they’re over it. The way round this is to take your a:hover CSS rule:

a:hover{
	...
}

and change it to this

a:hover, a:focus{
	...
}

Now the same hover effects your mouse users get, your keyboards users get too!

That pretty much covers it, in a basic form of nutshell. You’re now on your way to being a hyperlink guru – a much coveted title, I’m sure