Formatting links
Correct formatting of links differs depending on context. Including information gives important visual clues to readers and complies with accessibility guidelines.
This page shows you now different types of links should be formatted on your website.
Links to another site
Tell people when a link will take the to another site. People focus on content and sometimes ‘tune’ out the site banner and branding. Readers can become lost, not realising they are now on a different site. Tell the user to expect to go to another site by including the website name in the link title.
Examples - links telling people they are leaving your site to go to another
Note: These links are for instruction. They won't take you to actual sites.
e.g. course advice (Liaison Office website)
e.g. Enrolment website
e.g. Forms from the College of Science
Links to staff only resources on the UC intranet
Always indicate any access restrictions that apply to the target of your link.
Use 'Staff Only' when linking to the Intranet from a UC public website. (Unnecessary when linking between pages on the intranet).
Links within blocks of text
If the link is significant its often helpful to separate it out from the surrounding text using a list.
Link titles should be clear and not rely on the surrounding text to make sense. Web users often scan the links on a page without reading all the text and click on links without reading the context.
Its also a good idea to separate related links or links to background information from links which directly relate to the purpose of your page.
Examples - links scattered within a block of text
For postgraduate students wishing to specialise in cognitive science and the philosophy of mind, the School offers a two-year Master of Arts degree, a two-year Master of Science degree, and a one-year Postgraduate Diploma in Science.
Example - links separated from surrounding text using a list
For postgraduate students wishing to specialise in cognitive science and the philosophy of mind, the School offers:
- Master of Arts degree (two years)
- Master of Science degree (two years)
- Postgraduate Diploma in Science (one year)
Links to email addresses
Put the full email address as the link title:
greg.albertson@canterbury.ac.nz
The user knows it is a email address and not a web page. For many people clicking on a email link will automatically launch email software installed on their computer (even is they don't use it) and create a new email. It is best practice that users can identify an email link and choose what to do.
Examples - poor and good email links
Poor - Greg Albertson - readers will assume this links to a web page
Poor - Email - most readers will only be able to click on the link and not the option of copying the email address and pasting it into their email program
Correct - greg.albertson@canterbury.ac.nz - clearly identifiable as an email address. Readers can choose to click on it or copy and paste into their email program
Links to documents and downloads
Documents and downloads are different from web pages. They are typically longer and often cause a web plug-in (such as Adobe Acrobat viewer) to load into the browser.
Tell the user what to expect by putting the size and document type in the link title.
e.g. Link Title (Word, 112 KB)
e.g. Link Title (PowerPoint, 1.5 MB)
Document type formats to use in links
Type formats are aligned to the common names by which the format is known.
- Word documents - use Word.
- PDF documents - use PDF.
- RTF documents - use RTF.
- Text documents - use Text.
- Excel spreadsheets - use Excel.
- PowerPoint presentations - use PowerPoint.
- Executable files - use EXE.
- Compressed ZIP files - use ZIP
Size formats for documents and downloads
- Kilobytes - use KB when file is less than 1MB - express as integer (no decimal places).
- Megabytes - use MB when file is greater than 1MB - express to the first decimal place.
Links to multiple file formats
The same rules apply as under 'Links to document and downloads' above. The file type and size are shown for multiple formats.
e.g.
Links using images
Ensure that:
- the border is off
- the ALT text reads as a meaningful link title.