Links & Buttons

Links are clickable references to another page in the site or to an external website. Buttons are a style for a "call to action" link.

Links

What do links look like?

Regular text links are blue and underlined. Visited links are a slightly darker shade of blue. These link styles happen automatically when you insert a link to a file, internal or external page.

For a step-by-step instruction on how to add links and buttons, please read:

How-Tos: Links & Buttons

Why use links?

If you want to point to closely related content, use a link.

The kinds of content that work best in links are:

documents that supplement the webpage topic
internal pages or external websites that are related to the topic
email addresses

You can have a link in the main body of your webpage or in the right margin, in a feature box (see How-Tos: Feature Boxes and Organizing your content: Feature boxes.)

Write clear, descriptive link names

The link name should describe where you're sending users, and make sense without reading the words before and after it.
This technique benefits all users, and is essential for people with disabilities who use assistive technology.
For example, a person who is blind may use a screen reader to read your webpage aloud. They may decide to preview your page by listening to link texts only and not the surrounding information.
Good example: Read WebAim’s explanation on link text and appearance.
Bad example: Click here.

Other tips

A link on its own line does not have a period at the end.
An inline link (a link within a sentence) may be followed by a period. The period is not part of the link.
Most links should not open in a new tab. Links should open in a new tab only if the user needs to refer to the content on one page in order to complete a task in another tab.
For example, if your webpage has tips on how to fill out a form, a link to the form should open in a new window so the user can refer back to instructions.

Anchor links

Anchor links direct users to content on the same page rather than another page. They are sometimes called in-page links or jump links.

Anchor links can be useful, but only in certain contexts. Incorrectly used, they can be disorienting for users. However, as screens have become smaller, anchor links can be beneficial if you have a lot of page content and want to direct users to a specific section.

Two common anchor links are a table-of-contents-type link and a back-to-the-top link, which are often used together.

If you would like an anchor link on your web page, please contact webhelp@phsa.ca. We will help you determine if an anchor link is appropriate or if we should explore alternatives such as making your content shorter and skimmable.

We will also ensure that your anchor link is correctly implemented and follows best practices, including:

appropriate placement of the anchor link
correct labelling so that users know that the in-page link is different than normal links
contextual information that confirms to users that they’ve navigated to the correct section once they’ve clicked the link

Buttons

What does a button look like?

Our websites have two styles of buttons:

multicoloured button – in program's main and secondary colours
single-colour button – in program's main colours

Why use a button?

If you have a specific action that you want your webpage visitor to perform, use a button. A button is a "call to action."

The kinds of content that work well in a button are:

links to forms
links to surveys or other votes
feedback
content that the visitor needs in order to understand the webpage topic, such as guidelines or a handbook

Best practice

To follow PHSA style for buttons:

You can put a button in the body text or the right margin, but use only one button on a page.
Make the button text short and snappy and descriptive (don't use "click here").
If the only content in your right margin is a button, use a multicoloured button and remove the colour bar from your feature box (see How-Tos: Feature Boxes) to avoid a too-busy design.

Tab Heading

Provincial Health Services Authority

Web Editor Hub