Maximise the value of your hyperlinks

Hyperlinks

Web users quickly become familiar with what links are and how they work — or do they? At one level they do, but dig a little below the surface and you will find aspects that few understand and which are often overlooked even by web authors. One of the reasons, perhaps the main reason, is that until recently some of the CSS selectors involved has been poorly supported by browsers. With the advent of IE8 all that has changed. As this browser is rolled out through automatic updates it is likely that the use of IE7 will fall off rapidly. This means that virtually every browser in wide use, other than IE6, will provide support so authors can take full advantage of the CSS capability.

On this page I look at the basics of links and then go on to suggest some improvements which can be made very easily. I will cover navigation of links by both mouse and keyboard action. Finally I describe a method for printing the URLs of links; it relies on a CSS3 property but one that is already well supported.

The good news is that most authors will be able to improve the experience of their visitors without any change to the HTML code at all. All that is needed in most cases are a few simple changes to the stylesheet so the change can be deployed site wide very easily.

Code basics

The HTML code for a text link is

<a href="value">Text label</a> 

which when run looks something like

The appearance and behaviour of the anchor (<a>) are controlled by five CSS pseudo-classes

  • a:link
  • a:visited
  • a:hover
  • a:focus
  • a:active

Though many authors overlook a:focus and a:active as we shall see they do merit attention.

a:link
Defines the initial appearance of a link when a page is first opened before the link has been visited by the browser
a:visited
Defines the appearance of any link that has already been visited
a:hover
Defines the appearance of a link over which the mouse cursor is hovering
a:active
Defines the appearance of a link which, while being hovered over, has the mouse button pressed
a:focus
Defines the appearance of a link when it is ready to accept an input e.g. by clicking a mouse or pressing the 'enter' key. This state is reached either by moving the text cursor over it (e.g. by using the arrow or tab keys) or by making it active using the mouse button

Pseudo classes are completely independent of each other with no family or hierarchical connection but it is possible for more than one pseudo class to apply to a link at the same time; in fact there are ten different combinations possible for any link. The order in which the rules are written in the stylesheet is very important because any property values specified in later rules override any encountered earlier.

The table shows which combinations are possible. For instance state 5 shows an unvisited link with hover and active pseudo-classes applied.

Order in the
code of the stylesheet matters

Eric Meyer recommends [Ref 1] that, in a stylesheet, link pseudo-class selectors should be coded in the following order:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:focus
  5. a:active

Note of course that, where any of these selectors applies to a link, the property/value combination of a selector later in the list will override those of selectors earlier on the list but earlier selectors will continue to apply if later selectors use different properties.

Similarly, any property not specified in the stylesheet will use the default for any particular browser in use

Underlining

Invariably browsers default to underlining and colouring text links. Colours change when the mouse button is pressed and visited links are coloured differently from unvisited links. When hovering, browsers also change the cursor from the default (typically an arrow) to the pointer (typically a hand).

Break conventions
at your peril

Underlining might be thought so fundamental that it requires no further consideration. Not so. Just because underlining is such a ubiquitous feature of text links it is really undesirable to underline anything that is not a link. Any underlined text may look like a link and cause frustration to a visitor if it is not one. If you need to add emphasis HTML provides the em or strong elements. Text emphasis by W3C [Ref 2] explains explains their use.

Although it is conventional to underline links that convention is strongest in body text. In areas like menus, provided that the purpose of the menu is clear underlining here can look fussy or even amateurish. To make things easier for the visitor you could use a hover effect to animate the link in some way possibly by changing the background or text colour, that way the visitor will quickly learn what is clickable and what is not.

Where links are underlined it is still possible to improve on the default behaviour. Suppose you have a link like jury_rigged_peripherals. This is relatively difficult to read on screen for two reasons. Firstly the descenders on the characters become confused with the underline and you are reduced to using the context to decide what the letters are and secondly the underscores used in lieu of spaces become obscured by the underline. The severity of the problem depends on the font selected but in Ref 3 Ann McMeekin has suggested a simple improvement (The non-underlined underline [Ref 3]). Remove the underline and replace it by a bottom border.

This can be achieved by setting a style rule:

a:link, a:hover, a:visited 
{ border-bottom: 1px solid;
  text-decoration: none;
  padding-bottom: 1px;
}

The rule does not need to include the colour of the border since this will be derived automatically from that of the text so can change if required if visited links are coloured differently from unvisited.

Mousing around

Most visitors navigate sites using a mouse. Setting style rules with a:link, a:visited and a:hover as selectors will pretty much cover the behaviour of links in these cases.

There is no objection to setting the styles for a:link and a:visited to be the same though sometimes you may prefer to show which sites have previously been visited.

When the mouse hovers, browsers by default change the shape of the cursor. You may consider this sufficient indication of the presence of a link but you can give additional reassurance to a visitor if you change some other feature such as underline, text colour or background but there are some changes that are inadvisable.

  • Do not change the weight of the font.
  • Do not add or subtract a left or right border, margin or padding.

Any of these changes will alter the width of the a element and are likely to result in annoying movement of the anchor, adjacent anchors or other text. For the buttons in the menu area of this page one of these recommendations is not followed. The animation is achieved by changing background colour, border colour and padding. However the sum of the padding along either axis remains constant.

Focus on Key matters

Using a:focus and a:active pseudo classes

Browsing using
keyboard only

Once you are familiar with it, using the keyboard for navigation can often be much faster than using a mouse which some visitors are physically unable to manipulate. In this section we will look at the a:focus pseudo class and also the html attributes 'tabindex' and 'accesskey', all of which are relevant.

With most browsers the easiest way to navigate to links using a keyboard is by successively pressing the tab key. Each press moves to the next link (Shift + Tab moves backward). Later we will consider the behaviour of Opera which is rather different.

What is needed is a means of indicating on screen where the cursor is. All browsers indicate that a link is in focus by marking it with an outline. Outlines are similar to borders but differ in some ways.

  • Outlines take no space. It is as if the outline occupies a separate layer in front of the link.
  • Outlines are the same on all sides so each side cannot be separately specified.
  • All browsers, other than Firefox and Internet Explorer version ≥8, have at least slight anomalies in the way they either default or can be controlled by CSS rules.

The browser default styles do not necessarily give satisfactory results. Unlike other pages in Lab Notes this page uses the browser defaults for some pseudo classes. View this page using IE7 and you can probably see where focus falls as you press the tab key a number of times. Even so, since the outline is very narrow this is not easy. View the page using Firefox and the problem is worse. IE renders the outline in black. Opera and Safari use chunky blue outlines which in most circumstances will be much easier to see. Unfortunately Opera doesn't respond to authors' styles very well.

To alleviate these problems authors will want to override the defaults with styles matched to site requirements and will probably wish to do so by using the outline property so as to achieve maximum compatibility. The following demonstration is an attempt to do this for this page.

Demonstration area

Tab to, hover over or click the button to check its response. In this demonstration area the focus has been given the style

a:focus

a:focus { outline: 2px dotted #369; }

As a result the author should be able to control the appearance of both menu links and normal text links Top of area.

This remedy works for all browsers other than MSIE≤7.

The colour used for the outline should be chosen with care. When a visitor moves a mouse to a link and hovers they know exactly where the hover is occurring and so which link will be clicked. When navigating by keyboard it is less easy to see where the focus is falling so a strong 'clue' is required. The colour and width of the outline needs to stand out against other page content so that the visitor can use the page easily.

A slight disadvantage of this approach is that the link will have an outline not only when it comes into focus by keyboard action but also by clicking the mouse. In this situation the outline is unnecessary and some may find it irritating so it may be best to remove it, as indeed Chrome does.

Demonstration area

To avoid this problem a rule for the a:active pseudo class may be added after the rule for a:focus.

a:active

a:focus { outline: 2px dotted #369; }

a:active { outline: none; }

Here is the result with a text link Top of area.


Controlling the sequence – Tabindex

tabindex
(html attribute)

With browsers other than Opera, as the tab key is pressed the focus moves to the next link in sequence i.e. the next in the source code for the page. This is almost certainly the the best and most logical order to present to the visitor but there are exceptions. Elements e.g. divisions with position absolute or fixed, such as navigation menus, may not be coded in the order they appear on screen so the sequence order may not be what would be expected. This may be corrected by using the html 'tabindex' attribute. Tabindex is typically used with form elements (area, button, input, object, select, textarea) but may also be applied to anchors.

<a href="#dem2top" tabindex="20">Top of area</a>

The value of tabindex should be a positive integer. When tabindex is specified the elements will be given focus starting at the lowest value of tabindex and moving upwards. After the highest value is reached the sequence will pass to any element with tabindex of zero or other focusable elements with no tabindex attribute which will come into focus in order of source code. Browsers vary slightly in the sequence used. See table in appendix.

Because using tabindex seriously affects the default sequence authors should take extreme care to ensure that the imposed new order is in fact satisfactory. Many workers have recommended that the default order should be left alone but this disenfranchises Opera users so authors must decide on their own priorities.

Response of Opera

Opera responds slightly differently from other browsers. When tabindex is specified it responds to the tab key in the expected order, though it skips elements which have no tabindex. When no elements have tabindex the tab key has no effect so the default order, favoured by many, cannot be used. In this condition the Opera default keys - Shift+Up and Shift+Down - do act as a sort of substitute but the sequence is very quirky working on some pages but not others (e.g. not this page).

Using access key

Using shortcuts
accesskey
(html attribute)

Anyone who has ever used Control+C to copy something will know the value of keyboard shortcuts. html allows you to set up shortcuts to links very easily. When they can be used such devices are a great time saver but their application in web pages is rather limited because of the need to train visitors. They are normally applicable only to tasks that may have to be recalled and repeated rather frequently.

To use an Access key you press it simultaneously with one or two other keys. These other keys are dependent on the browser and system in use. They are

  • For Firefox (Windows) – Alt+Shift
  • For IE(Windows) – Alt
  • For Safari(Windows) – Alt
  • For Chrome(Windows) – Alt
  • For Mac systems all browsers – Control
  • For Opera press Shift+Esc for a list of access keys

The code for setting up an access key involves some html code like

<a accesskey="L" href="index.html">Lab Notes</a>

This is the code used on this page and will focus on the menu item 'Lab Notes' in the top right corner of this page. With most browsers this will also activate the link so that you are taken directly to the Lab Notes index. With Internet Explorer you must activate the link by pressing the enter key.

In using accesskeys there is a convention that the accesskey corresponds to a letter in a text link. This letter is usually underlined. If the letter is the first letter of the link text this is easily done by using the CSS first-letter pseudo class. For instance

#menu li a:first-letter { text-decoration: underline; }

would underline the first letter if all menu items.

If the letter is not the first letter then a span element will need to be added.

Three points to note are

  • Access keys can be any character but of course it must be accessible through a single keypress on the keyboard.
  • The menu invoked does not have to be visible at the time of use, in fact it does not have to be visible at any time. This is one of the great powers of the technique.
  • The key chosen should not conflict with any key already allocated by the system environment.

Images as links

When text is used as the basis for links it is easy, as long as the underline remains in place, to see what is clickable. When images are the source there is no simple convention so visitors may not realise which images are linked and which are not. The only clue available may be that when you move the cursor over the page its shape may change when it hovers over a clickable area.

Authors will be well advised to offer the visitor some clues through the text on the page but there are other ways to help as well.

Browsers sometimes default to adding a border to any image that is linked but this does not always occur and in any case may be considered undesirable. You may however like to add a border to an image as it is hovered over or rather, to avoid movement, you may change a border from invisible to visible. the demonstration area illustrates this.

Linked imageDemonstration area

In this demonstration the default border on the image is transparent but changes colour on hovering or when it comes into focus. The CSS required is shown in the example.

.image_area .image_area a:link img    { border: 2px solid transparent ; }
.image_area a:visited img { border: 2px solid transparent ; }
.image_area a:hover img   { border: 2px dotted #369; }
.image_area a:focus img
  { outline: 0px ; border: 2px dotted #369; }
.image_area a:active img
  { outline: 0px; border: 2px solid transparent; }

The other way that images may be made clickable is using image maps. When the active area of a map is hovered over the shape of the cursor will change but there are no other mechanisms for indicating what is happening. For this reason when image maps are used, it is very desirable to indicate the sensitive areas by some other means for example by drawing their outline on the image. While this might be thought as destroying the effect desired it is likely that the purpose of the map may be missed completely if no such method is employed.

Displaying urls in a way which is friendly on screen

The keen-eyed may have noticed that none of the links on this page, including those in the references area, display showing their urls. That makes for easier reading and of course you can click the link to get to its destination. If you want to view the url just hover over it and you can read it in the status bar at the bottom of the window. If you print the page the full url is printed as will be described later.

However authors sometimes prefer to display the full url on screen in all its glory. You may say that is up to them and think no more of it.

urls can become quite long and may overrun the width available for display. Normal text would wrap breaking at space characters but urls contain no spaces so this can't happen. The url for this section is http://www.charlescooke.me.uk/web/lab_notes/link_styles.html#displaying_urls_in_a_way_which_is_friendly_on_screen. Most browsers allow this to overflow the containing block, a few, including Firefox and Opera, break the text where slashes provide the opportunity allowing it to wrap even though it contains no spaces. If the container is a table cell Internet Explorer even widens the cell to accommodate the text which can seriouly damage a page layout.

Authors can avoid this problem by never showing the url on screen.

External links

It may help your visitors if you mark the external links to show that they take them off your site rather than to other pages on your site. The symbolExternal link image which has been popularized by Wikipedia is generally recognised as indicating this. As far as I know no restrictions have been placed on the shape used though the image here is my own reconstruction. It is very simple to apply and involves no change to the HTML and just one CSS rule. Though it uses a CSS3 property it works on all modern browsers even including MSIE7.

Here is the rule used for this page:

a[href^="http"]
  { background: transparent url(images/filename.png)
     no-repeat right top; padding-right: 10px; }

This by uses the CSS3 “starts-with” selector, ^=, which will match all references which include the string 'http' so will also pick up secure sites. It assumes that links to your own use relative links and omit the 'http'. If your own site uses absolute urls Stuart Langridge [Ref 4] (Ref 4) shows how to exclude those pages.

You can use a similar technique to identify email links, links to pdfs and other document types as shown by Neal Grosskopf [Ref 5].

As usual you should ensure that you do not infringe owners rights in any images you use.

Printing URLs

Although clickable links which do not reveal the url are very satisfactory on screen they are less than satisfactory when printed. To overcome this a print stylesheet can be used to print the actual url. Eric Meyer [Ref 6] has described a method which will do this. To do so the print stylesheet could include code like

a[href^="http"]:after 
  { content: " (" attr(href) ")"; 
     font-weight: normal; border-bottom: 1px solid; padding-bottom: 1px;}

I have included the underlining style suggested by Ann McMeekin in this because in print it is particularly important not to obstruct the text by the underline.

The code uses the same CSS selector as above along with the CSS 2.1 :after pseudo element to add content after the a element. This rule will work with the latest browsers but not with IE 7 and earlier.

The overall effect in print will be something like

Eric Meyer (http://www.alistapart.com/stories/goingtoprint/ )

Browser responses

The response of several browsers is documented below. This shows the default behaviour resulting from the browser's internal style sheet and also whether the browser responds correctly to authors' stylesheets.

With very minor differences the latest versions of all browsers will respond as expected to CSS rules.

Table 2
Browser responses


IE 6 IE 7 IE 8 Firefox 3 Chrome Safari 3 Opera 9
Unvisited
(:link)
Default Blue text Blue text Blue text Blue text Blue text Blue text Blue text
Styled No change Responds to styles except outlines Responds to styles Responds to styles Responds to styles Responds to styles Responds to styles
:visited Default Purple text Purple text Purple text Purple text Purple text Red text Purple text
Styled Responds to styles
except outlines
as IE6 Responds to styles Responds to styles Responds to styles Uses a:link style Responds to styles
Images
Unvisited
(:link img)
Default Purple border Blue border Blue border Blue border No border No border No border
Styled Applies styles as if visited Responds to styles Responds to styles Responds to styles Responds to styles Responds to styles Responds to styles
:visited img Default Purple border Purple border Purple border Purple border No border No border No border
Styled Responds to styles
except for outline
as IE6 Responds to styles Responds to styles Responds to styles Takes link style Responds to styles
Keyboard input (:focus) Default Dotted outline
black
Dotted outline
black
Dotted outline
black
Dotted outline
link colour
Orange Outline Wide blue outline
Wide blue outline
Styled Wrongly takes active rule as IE6 Responds to styles Responds to styles Responds to styles Responds to styles Outline can't be removed but
responds to other styles
Mouse down (:active) Default Dotted outline Dotted outline
Dotted outline Dotted outline
Red text
No outline Red text
Red text
Styled Accepts color, not outline, rules as IE6 Responds to styles Responds to styles Responds to styles Responds to styles but
sometimes quirky
Accepts rules if
active is after focus
Mouse hover
(:hover)
Default Hand cursor Hand cursor
Hand cursor Hand cursor Hand cursor Hand cursor
Hand cursor
Styled as IE7 Responds to styles except outline Responds to styles Responds to styles Responds to styles Responds to styles Responds to styles
Hover over image
(:hover img)
Default Hand cursor Hand cursor Hand cursor Hand cursor Hand cursor Hand cursor Hand cursor
Styled
Responds to styles Responds to styles accepts rules Responds to styles Adds border Adds border
Long URL (Div) Extends Overflows Overflows Wraps Overflows Overflows Wraps
Long URL (Table) Extends Extends Extends Wraps Extends Extends Wraps

Navigation using keyboard
Key to move between links (Default) *1 Tab
Shift + Tab
Tab
Shift + Tab
Tab
Shift + Tab
Tab *2
Shift + Tab
Tab
Shift + Tab
Tab *3
Shift + Tab
Shift + Down
Shift + Up
Tabindex sequence *4 1-up, 0/blank 1-up, 0/blank 1-up, 0/blank 1-up, 0, blank 1-up, 0/blank 1-up, 0/blank 1-up, 0
No tabindex sequence Code order Code order Code order Code order Code order Code order No response *5
Select Link Enter Enter Enter Enter Enter Enter Shift + Enter
Accesskey partners ALT ALT ALT SHIFT+ALT ALT ALT SHIFT+ESC *6
Access key action Focus *7 Focus *7 Focus *7 Activate Activate Activate Activate

*1 Press these keys to move forward or backward between adjacent links

*2 Alternatively arrow keys can be used

*3 To enable this you must edit preferences 'Press tab to highlight each item on a webpage'

*4 1-up = Start with 1 followed by tab index in ascending order. 0/blank = This is followed by links with tab index of zero or none in code order. 0, blank = followed by links with tab index zero in code order then those with no tab index in code order. 0 = followed by links with tab index zero in code order but those with no tab index are ignored.

*5 Opera does not respond to tab key if tabindex is not specified. Opera does not appear to facilitate link navigation if Shift Down (shift Up) see http://www.opera.com/browser/tutorials/nomouse/

*6 With opera the partner keys are not pressed with the accesskey but before it. This gives a list of accesskeys one of which is then pressed separately.

*7 You must then press enter to activate link.