Best practice for HTML links

HTML links

The following link rules are based on accessibility and usability principles.

Links are one of the fundamental elements that make up our online experiences. They have been a feature of the web since the beginning and are what makes the web the web. In a well-designed website, all links should be part of the journey that guides the users towards specific actions. This includes links that:

help you to navigate around the website
signpost to extra information
are a call to action

It is important to be aware that:

screen reader users like jumping around from link to link on the page and read links out of context
search engines use link text to internal pages as a clue to what a page is all about, so it is important to include relevant keywords in the link
visual readers skim over the page and don’t read every word, so they will find descriptive link text useful

Read a summary about the link component.

Understand how to link to non-HTML resources.

Links should be meaningful out of context

Imagine you removed all the links on a page and listed them separately from the content. Would a user know where each of the links will lead them? Links that are not clear are bad for accessibility, usability and search engine optimisation. They should always provide obvious direction for users. Read the linked text out loud for each of your links. Would someone understand what content you are linking to, based on the linked words spoken?

Search engines, including Google, also consider meaningful link text in their ranking algorithms. A link to ‘sepsis training’ helps the page score better for the words ‘sepsis training’.

Use:

book your ticket
pay now
accessibility resources
become a UX guru
contact us

Avoid:

click here
more
here
click for details
read more

Links should be concise, descriptive and start with keywords

Make it quick and easy for users to scan your links. They should have at least one word, but two words is more helpful.

People mostly look at the first two words of a link. A link that is just a letter or symbol makes it difficult for users to click on and do not provide context.

Use:

career opportunities

Avoid:

we offer thousands of career opportunities you may be interested in

Links must be unique

Links with different destination URLs must have unique link names. When links that point to different URLs have the same link text or description, screen reader users may be unable to work out which one links them to the information they want.

Use:

Avoid:

Annual leave (link to annual leave app)
Annual leave (link to annual leave intranet pages)

Where possible, end on a link

Write sentences so links are at the end. This will make links easier to spot because users will see them as soon as they finish reading the sentence. Users can then click the link immediately, instead of having to re-read the sentence to find it.

Use:

follow NHS Education for Scotland on Twitter @NHS_Education

Avoid:

you can follow us on Twitter

Links should not refer to physical actions

Links should not describe a physical action such as ‘click’. This verb focuses on the mechanics of using a mouse, which is not necessarily how your user will interact with your links. The word ‘here’ is also vague and doesn’t provide a clear description of where the link will take the user.

Use:

jobs are advertised on the NHS Scotland National Recruitment portal

Avoid:

click here to view advertised jobs
recently advertised jobs can be found here
please click here for all other Health-related and GP Practice jobs

Don’t use the word ‘link’ in links

Adding the word ‘link’ within a link is redundant information for all users. The link should be styled clearly and does not need the word ‘link’ to describe its function. Screen readers say the word ‘link’ before all links, so using the word 'link' will make the experience very repetitive.

Use:

Avoid:

Do not use web page addresses as link text

Using a web page address or URL as a link is difficult to read and will slow readers down. Users of adaptive technologies must listen while their screen reader reads out every single character of a web page address. This will give these users a poor experience of the website.

Use:

Links and hypertext

Avoid:

http://webaim.org/techniques/hypertext/link_text

Write out links to email addresses in full

Links to email addresses should be written in full, otherwise, it will not be clear that the link is an email address.

Use:

Email: nes.ux@nhs.net

Avoid:

Email: NES UX

Avoid links opening in a new tab

Generally, we recommend opening links in the same tab. Usability research carried out by NES has found opening links in new tabs can be disorientating.

If you have a good reason for opening a link in a new tab, warn the user this will happen. You can do this by adding '(link opens in new window)' text within the link. You might want to open the link in a new tab or window if:

the link destination contains context-sensitive information such as help instructions
the user is signed in and following a link to a page outside of the secured area would terminate the user’s sign in

References

Our guidance on best practice for HTML links is based on extensive research. To gain a greater understanding of best practice in more detail have a read through these references: