Links can connect users to other UQ pages, documents or external pages.

Using links effectively can help improve the user experience and can boost our rankings in Google and other search engines.

1. Writing link text

Link text should be descriptive, specific and integrate seamlessly with the text around it.

Aside from proper nouns, link text should always be lower-case and accurately describe the page or resource it is linking to.

Users should easily understand where they’re going and why if they click on a link.

Example: We’ve written a list of common academic writing errors so you know what to avoid.

If a link is accurate, descriptive and specific, it will help all users, including those using assistive technologies, to better understand our content.

Best practice

  • Avoid using vague or generic instructions like ‘click here’.
  • Use the language of your audience – avoid jargon, branding or marketing-speak.
  • Try to include link text at the start of the sentence or paragraph so it is easy to scan.
  • If your link includes a call to action, make sure to include the verb in the link text (e.g. 'Subscribe to our newsletter', not 'Subscribe to our newsletter').
Top of page

2. Relative and absolute paths

Before you add links to a page, it's important to understand the difference between a relative path and an absolute path:

Relative path

Relative paths are relative to the site they are on and don't include the:

  • protocol (http or https) or
  • domain (for example, www.my.uq.edu.au).

You can only use relative paths to create links between content or pages within the same website.

Examples:

  • /files/7374/HDR.jpg
  • /research
  • /starting-at-uq

Absolute path

Absolute paths include the full URL from beginning to end, including the protocol and domain.

You should always use absolute paths when you are linking to content on external or third-party websites.

Examples:

  • https://habs.uq.edu.au/files/7374/HDR.jpg
  • https://communication-arts.uq.edu.au/research
  • https://my.uq.edu.au/starting-at-uq
Top of page

3. Internal and external links

Links can be internal or external:

  • Links that send a user to other pages within your website are internal links.
  • Links that point from your website to another domain are external links.

If you want to add a link to your page, there are different steps for creating internal links and external links.

Internal links

Internal links are important for improving your site architecture and SEO. Use them whenever you're adding a link within your website.

Internal links will also update automatically if your page's title or URL changes.

How to add an internal link

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, select 'Internal path' from the 'Link type' drop-down menu.
  3. In the 'Link' box, type the name of the page you want to link to. The system will auto-suggest a list of pages.
  4. Select the appropriate page.
  5. Click 'OK'.

External links

Only link to external or third-party websites when there is a clear user need. There are a number of risks associated with external links.

External websites can change without notice. The links can break entirely, or end up linking users to irrelevant or incorrect information.

Before linking off-site, consider the following:

  • Have you been fair and impartial in choosing which website to link to?
  • Are there other websites that provide similar or better content?
  • Is the third-party website free to access?
  • Is the site authoritative and trustworthy?
  • Does the third-party website work on mobile devices?

Try to avoid linking to commercial websites and never link to a site in exchange for a reciprocal link or payment.

How to add an external link

Make sure users know they will be leaving the UQ website by using clear and informative link text.

Example: Visit the Department of Home Affairs website for more information about student visas.

Send users to a specific page rather than to a homepage to avoid confusing them. You should also routinely check external links to ensure they are still working.

Follow these steps to add a link to an external website:

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, select select 'URL' from the 'Link type' drop-down menu.
  3. Type in or paste the full address in the 'URL' box.
  4. Choose the appropriate protocol for the page (http or https).
  5. Click 'OK'.
Top of page

4. Linking to documents

When you link to a non-HTML resource (for example, a PDF or Word document), make sure you include the file size and document type in the link text. For example:

  • Download the undergraduate guide (PDF, 800KB)

This will ensure a user knows what to expect when they click the link.

If the file you're linking to is hosted on your website, you can make file size and type appear automatically by ticking the 'Display file type and size in link' box.

If the file you're linking to is hosted on an external website, you will have to manually add both the file size and file type. In general, try to avoid linking to documents hosted on external websites.

How to add a link to a document

To link to a file hosted on your site:

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, select 'URL' from the 'Link type' drop-down menu.
  3. Click the 'Browse server' button, then double click the document you want to link to.
  4. Tick the 'Display file type and size in link' box.
  5. Click 'OK'.

To link to a file hosted on an external site, follow the instructions for 'External links'. Make sure you manually add both the file size and type to your link text before creating the link.

Top of page

5. Linking to an accordion

You can link to a specific accordion on a structured page by using the accordion's ID number. ID numbers start at 0, so the:

  • first accordion ID is 0
  • second accordion ID is 1
  • third accordion ID is 2, and so on.

If you link to an accordion on the same page, the accordion won't open — the user will be taken to the accordion heading.

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, select select 'URL' from the 'Link type' drop-down menu.
  3. Select '<other>' from the 'Protocol' drop-down menu.
  4. In the URL field, enter the address of the page where the accordion is.
  5. At the end of a URL, type a hash followed by the ID number of the accordion (e.g. #3).
  6. Click 'OK'.
Top of page

6. Arrow links

Arrow links are ordinary links with a style applied to them.

On the page, arrow links appear slightly indented and bolded and have a right-pointing chevron next to them.

Arrow links support all link types, whether internal or external, absolute path or relative path.

Example:
Learn more about writing for the web

Best practice tips

  • Arrow links are useful for calls to action or situations where a link needs to stand out.
  • Only use arrow links at the end of a paragraph or section, or when creating a list of links.
  • Include a verb in the arrow link text. For example, 'Read more about accommodation'.

How to add an arrow link

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, create your link in the 'Link info' tab.
  3. Go to the 'Advanced' tab and type arrow-link into the 'Stylesheet Classes' box.
  4. Click 'OK'.
Top of page

7. Anchor links

Anchor links are shortcuts that let users jump to a specific point on a page. They allow users to quickly find information without scrolling.

To create an anchor link, you will first have to create an anchor and then link to the anchor.

How to create an anchor

  1. In the WYSIWIG editor, place your cursor at the point where you would like to create the anchor. Be careful not to highlight any text – this will create a dead link.
  2. Click the anchor symbol (flag icon) to open the dialogue window.
  3. Give the anchor a name. Use hyphens instead of spaces, or the link might not work.
  4. Click 'OK'.

The anchor will appear on the page as a red flag next to the text. This flag will not be visible to users.

How to link to an anchor

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, select 'Link to anchor in the text' from the 'Link type' drop-down menu.
  3. From the 'By anchor name' drop-down menu, select the name of the anchor you created.
  4. Click 'OK'.

Linking to external anchors

You can also link to anchors on other pages on your website.

You will still need to create an anchor on the page you want to link to by following the directions above. Once you've created the anchor, there's a slightly different process for linking to the external anchor.

How to link to external anchors

  1. Highlight your link text and click the link icon in the WYSIWYG editor.
  2. From the window, select select 'URL' from the 'Link type' drop-down menu.
  3. Select '<other>' from the 'Protocol' drop-down menu.
  4. In the URL field, enter the address of the page you created the anchor on.
  5. At the end of the URL, type a hash followed by the anchor name (e.g. #my-anchor).
  6. Click 'OK'.
Top of page

8. Email addresses

When you link to an email address, you can activate the default email software on a user's device.

If there is only one email address on a page, it's OK to create a link as a call to action. For example:

  • Email the office
  • Send us an email.

Alternately, you can use the entire email address in your link. You should always do this when there are multiple email addresses on a page. For example:

Including the whole email address is clearer and more accessible for users and also gives them the option of copying and pasting the address if they want to.

Whatever happens, avoid writing out email addresses phonetically (for example, by writing "j dot blogs at uq dot edu dot au"). This is just confusing for everyone.

How to link to an email

  1. Highlight the email address you're adding a link to and click the link icon in the WYSIWYG editor.
  2. From the window, select select 'E-mail' from the 'Link type' drop-down menu.
  3. Enter the email address in the 'E-mail address' field.
  4. Add a subject for the email and message body text (if relevant).
  5. Click 'OK'.
Top of page