Links and anchors
Links (or hyperlinks) point the audience to another location. Links may go to other internal pages, external websites or to media files. Anchor links direct users to a specific section within a web page.
Using links
Do
- Use links in context to the overall understanding of the content. Ensure links are used at the point in the content where they are most useful.
- Write descriptive links so the audience understands the purpose of the link. Limit of 150 characters per link.
- Link text must be able to be understood without extra context.
- This is important for accessibility where screen readers and other assistive technologies tab from link to link to scan the content.
- Do not use generic named links, for example 'Click here' or 'Read more'. Generic links make no sense out of context and don't tell the audience where the link will take them.
- Keep link text to the point and put the most important words first.
- Links should be about a single idea, written in clear, descriptive language.
- Limit the use of links where you can as too many links can overwhelm the audience and cause them to abandon the content.
- Put links at the end of a sentence if it is important for the audience to understand all the content first.
- Use the title of the page you are linking to as the link text. This helps the audience know that they are in the right place.
- Start your link with a verb if you are linking to a task for the audience to complete. For example, 'Send an application'.
- Link to online content first, unless an offline resource like a PDF is better for the audience experience.
- Provide the audience with information about the offline resource to help them decide whether they download it of not:
- the resource title – a descriptive title not the media library file name
- file type, for example, PDF, .doc, .xlxs
- file size in kilobytes (KB) or megabytes (MB)
- include all the information in the link text
- Note – if the resource has been uploaded correctly to the media library, the file type and file size will automatically be added to the end of the file name when you add the link.
Don't
- Don't put links in the page summary field and try to avoid linking off in the first couple of paragraphs. Allow the audience to read the page content before following a link.
- Only use links to external sources if they are essential for the audience to find information or complete a task.
- Don't duplicate content. If the relevant content exists on another page, link to that page. Duplicated content is confusing and may build doubt in the audience about what the source of truth is.
- Don't add a list of links you think the audience may be interested in, for example 'Further reading', but is not essential to the understanding of the page content.
- Do not use generic named links, for example 'Click here' or 'Read more'. Generic links make no sense out of context and don't tell the audience where the link will take them.
- Do not overwhelm the audience with too many links or linking to the same page / resource throughout your page.
How to add a link in within the page text
To add a link within the content:
- Add a Block for a standard page or a WYSIWYG content block for a landing page. Find out more about how to edit a Block / WYSIWYG.
Click on the Link icon.
Enter the URL that you want your button to link to. For internal pages enter the page title and select it from the drop down, or enter the internal node pathway, for example, '/node/1234'.
For external links enter the URL pathway. For external links you'll also need to add a Title for the link, such as the page title of the URL. This will create a 'managed link'. Learn more about managed links.
- You can choose to style the link as a button. Find out more about adding buttons. You can also set the link to Open in a new window, although in most circumstances it is recommended to leave the default settings. The current default settings are:
- internal links open within the same window, and
- external links open in a new window.
- Click the green tick to add the button to your page.
- Save your page to display the button. Remember to check that the link is working.
Anchor links
An anchor link is a type of link that allows users to jump to a section within a web page. Anchor links are very helpful for linking to referenced content and are useful for navigating long web pages.
How to create an anchor link
Creating an anchor link is 2 parts:
- placing an anchor where you want to direct users, and
- creating the link that goes to your anchor. You can create multiple links to the same anchor.
1. Creating your anchor
Click the place on your web page that you want to direct users to. It must be within a Block / WYSIWYG container.
Select the flag icon from the toolbar.
Create a name for your anchor that is relevant to your content and separate any words with a hyphen. For example, ‘how-to-create-links’.
2. Add your link
Select the text you want to become a link to your new anchor. For example, if your text is ‘Learn more about how to create links’, you would select ‘how to create links’.
Click the link symbol.
In the URL field add a hash (#) and your anchor name, for example ‘#how-to-create-links’.
If you are linking to an anchor on a different page, follow the process to create an internal or external link then add # and your anchor at the end of the URL, for example ‘/node/123#anchor-name’ or ‘https://example.com/web-page#anchor-name’.
3. Save your page
After you have saved your page, test your link.
Example of an anchor link
Ensure that your anchor links follow the link guidelines.