Using hyperlinks in web content
How you link content is important in helping people find what they’re looking for. Links should be used to avoid duplicating content.
Learn how to insert links in CMS Lite.
On this page
- Link text and accessibility
- Search Engine Optimization (SEO)
- Anchor links
- Linking to content on gov.bc.ca
- Linking to news releases
- External links
- Email addresses
- Phone number links
- Open links in the same tab
- Documents and files
- Linking images
Link text and accessibility
People scan content for links and headings to find what they came for. This is also true for people that use assistive technologies. Because of this, link text needs to make sense without reading the content before or after it. Write link text that describes where it will send someone:
- Don’t write: Click here for resources and guides on accessible digital content
- Instead write: Learn how to create accessible digital content
Avoid linking blocks of text, long sentences or paragraphs. Link text should succinctly describe the destination and, where possible, what someone might accomplish by clicking the link. Links that exceed one line in length are difficult to read.
Search Engine Optimization (SEO)
Check your links are still current as part of your content lifecycle reviews. Broken links impact the usability of content, which affects your SEO.
Remember to:
- Be careful when linking to content that’s likely to expire or move, set a reminder to update or remove those links
- Use the built-in link checker in CMS Lite
- If you’re working on another platform, check with your web team about using a broken link checker
Anchor links
Also known as bookmark links, anchor links jump to specific content on a page, such as a section of a report. Learn how to add anchor links in CMS Lite.
Back-to-top links
Back-to-top links are shortcuts that allow people to navigate back to the top of the page quickly. This is helpful on long pages where people may need to reference the table of contents or navigation menu.
CMS Lite has a back-to-top link built into each page in the form of a floating button on the right-hand side of the screen. If you’re using another platform, check with your web team to confirm.
Linking to content on gov.bc.ca
Each page and asset in CMS Lite have a ‘globally unique identifier' (GUID). GUIDs are permanent links made up of a unique set of numbers and letters. They allow you to avoid broken links if the name or location of the content changes.
Human Readable URLs (HRUs) contain page paths and words that may change over time. This means they will break if the content is moved or the page path is renamed.
Learn how to use GUIDs and HRUs in CMS Lite. If you’re linking to content on gov.bc.ca from outside CMS Lite, you can access the GUID using the ‘share’ icon in the bottom-right corner of every page.
Linking to news releases
Content in news releases can quickly become stale. This can be frustrating and creates barriers for people who are trying to complete a task or access a service.
Avoid linking to news releases unless they include critical information that is not available anywhere else. Instead, point to static content that helps people find more information.
If you must link to a news release, only link to it for a maximum of 30 days. After 30 days, either:
- Replace the link with a link to static content
- Remove the link if no static content exists
External links
External links connect pages on your website to those on other domains. Only link to non-government information when necessary. Set links to open in the same browser window or tab by default. This prevents users from becoming disoriented and allows them to use the ‘back’ button if needed. If you are not sure, email WebStandards@gov.bc.ca for guidance.
Link to secure content
URLs you link to should begin with ‘https’. The ‘s’ means ‘secure.' If it’s missing the 's' then the content is not secure.
Email addresses
Use generic rather than personal email addresses in web content. When possible, contact forms should be used in place of email addresses.
If you’re including an email address in your content, use the email as the link text. For example:
- Write: email WebStandards@gov.bc.ca for guidance
- Don’t write: email the Web Standards team for guidance
Phone numbers links
Phone numbers should be linked. This allows people to call a number by clicking on it which makes it easier to call the right number.
Format phone numbers so they're easy for everyone to read.
In CMS Lite
Phone numbers should be added using the contact information box in CMS Lite. If it’s part of the body of your content, add the number as a link. In the URL field use ‘tel:’ followed by the full phone number in international dialling format.
For example: tel:+1-250-555-0123
HTML telephone links
If you’re using another platform you'll need to use the HTML code provided in the Design System.
SMS texting links
If you’re providing a number for people to send SMS texts to, add the number as a link in the body of your content. In the URL field use ‘SMS:’ followed by the full phone number in international dialling format.
For example: sms:+1-604-555-0123
Open links in the same tab
Links to a different page on the same website are called ‘internal links’. Internal links should always open in the same tab. This allows people to use the navigation menu or back button to return to the previous page.
Open links in a new tab when they are:
- Giving information that disrupts a process, such as filling out a form
- Ending a secure session that requires a login, such as BCeID
- Opening a document
Documents and files
Links to documents may open in a new tab. Include the file type and size in the link text. There is no space between the file size and unit of measurement, for example:
Links to documents and files are capitalized.
When possible, instead of a document, include the information in the page content. This improves accessibility and SEO.
Linking images
Whenever you use an image, it must include alternative text (alt-text). If the image is linked the alt text on the image should tell you where the link goes, such as the name of the page you'll be taken to.
If the image has a function, such as a magnifying glass to search, the alt text should be ‘search’.
Learn how to add alt text in CMS Lite. If you’re working on another platform, see the Web Accessibility Tutorial on Functional Images (external link).
For more information see using images and graphics in web content.