Add hyperlink to text

Link text can be used to link to other pages both internally and externally. The different types of links will be reviewed further on this page.

It is important to remember accessibility when adding Link text. The Writing Style Guide states that the word or phrase you choose to link from (your hypertext) should provide context and be relevant to the action you want the user to take. Avoid ambiguous Link texts such as “click here” and “read more”. 

External links

  1. Highlight the text you want to link. Do not select any trailing punctuation or white space.

    Screenshot of copy text block
  2. Select the Link icon from the editing toolbar and a pop-up window will appear. 

    Screenshot of Link icon
    • If the page is an External link (not within the site), enter the URL.

    • To link to an Email address, type "mailto:" and enter the email address, e.g. mailto:wcms@uwaterloo.ca.

  3. Select Save.

  4. Select Add block (Or Update if it’s a pre-existing block).

  5. Select state from the Change to: drop-down menu.

  6. Select Save layout.

Advanced Email Syntax (Mailto links)

Other email fields can be predefined; so when a user selects the link, these fields will auto-populate. “cc=”, “bcc=“, “subject=”, and “body=” are the variables to add to the end of the mailto URL. Multiple emails can be separated by a comma. For spaces use “%20” and for linebreaks use “%0A” in the URL.

Syntax: mailto:[email@address.ca]?[1st variable][value1]&[2nd variable][value2]&…

E.g. mailto:wcms@uwaterloo.ca?subject=Email%20Subject&cc=another@uwaterloo.ca,second@uwaterloo.ca

Internal links

Internal linking occurs when a site links to other URLs on the same website, whereas external linking occurs when a site links to URLs on a different website. Internal links help users to navigate your website and establish a strong information hierarchy. When linking internally, it is not the best practice to utilize node numbers. Linking to content on your own website gives you full control over the content as opposed to an external website.

  1. Highlight the text you want to link. Do not select any trailing punctuation or white space.

  2. Select the Link icon from the editing toolbar and a pop-up window will appear.

  3. To link to internal content, begin typing the title and select it from the drop-down menu that appears. The title is the name of the page, and not the URL path. It is not necessary to enter a '/' before the title.

  4. To link to an Anchor on the same page, add a pound/hashtag sign (#) in front of the anchor name, e.g. #anchor-name. 

    • Note: The anchor name must be spelled out correctly as there is no automatic drop-down menu to choose from.

  5. To link to a File or an Image that exists on your site, begin typing the name of the File or Image and then select it from the drop-down menu that appears.

  6. Select Save.

  7. Select Add block (Or Update if it’s a pre-existing block).

  8. Select state from the Change to: drop-down menu.

  9. Select Save layout.

Internal links to listing pages

When linking to an internal listing page, you must use the internal path and are unable to select the listing page from the link drop-down function.

  1. Highlight the text you want to link. Do not select any trailing punctuation or white space.

  2. Select the Link icon from the editing toolbar and a pop-up window will appear.

  3. Enter the internal path including the site name of the listing page you wish to link to. The correct path to enter of the default news listing page on a site is bolded in the following example: https://uwaterloo.ca/grebel /news.

  4. Select Save.

  5. Select Add block (Or Update if it’s a pre-existing block).

  6. Select state from the Change to: drop-down menu.

  7. Select Save layout.

Note: To link to a filtered version of a listing page, you must first filter said listing page and then copy the internal path. If you were linking to an internal filtered news listing page, it may appear similar to this: “grebel/news?title=&date_type=%3D&date%5Bvalue%5D=&date%5Bmin%5D=&date%5Bmax%5D=&audience%5B1%5D=1”.