Creating Links
There are five types of hyperlinks you can create when editing text in a field that has a text editor toolbar.
- Internal Links to pages on your site
- These are links that point to other pages within your website
- External links to pages outside of your site
- These are links that point to pages outside your website
- Email links
- These are links that point to an email address, open an email client and draft a message, often pre-filling out the To field with an email address, a subject, or add CC email addresses.
- Telephone links
- These are links that telecommunications apps allow recipients to call a number or open their text message app with the phone number prefilled.
- Anchor links
- Anchor links, also known as jump links, are clickable text that direct users to a specific section of a web page. They are a type of internal link that helps users navigate long pieces of content.
Please refer to Western's Web Accessibility Guide for best practices to make accessible hyperlinks.
Create an Internal Link
You can easily add internal links to any content on the website—pages, taxonomy terms, images, and more! Avoid copying and pasting the full URL or typing full URLs - instead use the Linkit feature in the Insert Link tool. Linkit automatically inserts the internal Node ID (e.g., node/214), which stays consistent even if the friendly URL changes with a new page title.
Steps to creating an internal link
- Select the text
- Select the Link button in the formatting toolbar. The Add Link window is displayed.
- Start typing the title of the page you are linking to. The tool will provide a list of content using autocomplete.
- Select the item from the list.
- Once you’ve made a section, the internal Node ID is placed in the URL field.
- The friendly URL (example: mysite.wwu.edu/how-to-create-an-anchor-link) will be displayed when someone visits the page
- An optional Title can be added (it is not necessary and not recommended as page titles change more often than you'd think!) This will populate the title attribute of the link, usually shown as a small tooltip on hover.
- Select Save, which displays as a green checkmark. (Sometimes you need to click Save twice.)
Create External Link
Unlike the internal link, when adding external links, always include the full URL—starting with https://. For example: https://www.wwu.edu. If you skip the "https://," like typing just www.wwu.edu, Drupal will tack it onto the site name (e.g., https://sitename.wwu.edu/www.wwu.edu), thus creating a broken link. But don’t worry - external links are the perfect time to copy and paste the full URL to keep things smooth and error-free!
Steps to creating an external link
- Select the text
- Click the Link button in the formatting toolbar. The Add Link window is displayed.
- Enter (or paste) the fully qualified URL
- Click Save
Create an Email (mailto) Link
Mailto links are associated with email addresses. When clicked, they open the user's email client with the address automatically populated in the "To:" field of a new email.
Steps to creating an email link
- Highlight the text for the mailto link.
- Best practice is to have user friendly link text be the hyperlinked text, for example: Email the Director versus displaying the actual email lastname@wwu.edu.
However if an email is going to a department, and the text communicates the link purpose, (webhelp@wwu.edu or chemistry@wwu.edu ) then it is clearly visible what purpose the link serves and passes accessibility concerns.
- Best practice is to have user friendly link text be the hyperlinked text, for example: Email the Director versus displaying the actual email lastname@wwu.edu.
- Select the Link button on the formatting toolbar
- Enter mailto:user@wwu.edu (Replacing user@wwu.edu with the actual email address.) Be sure to use all lowercase letters and do not add any spaces. You can link to any email address, not just wwu emails, for example: jean@gmail.com
- Click Save (the green checkmark)
Create a Telephone Link
Tel links are associated with email addresses. When clicked, they open the user's telecommunications application with the phone number automatically populated.
- Highlight the text for the tel link, usually this is the complete number including the area code. For example. (360) 123-1234
- Best practice is to link all telephone numbers, but not fax numbers.
- Select the Link button on the formatting toolbar
- Enter tel:1234567890 replacing the numbers with the actual phone number. Be sure to remove all spaces and/or formatting including removing all instances of parentheses and hyphens ( ) and - .
- Click Save (the green checkmark)
Anchor Links
Anchor links are commonly used to create a table of contents for lengthy documents, helping visitors navigate the page more easily. We developed a Page Menu block that easily creates anchor links on a page. Learn about the Page Menu block. If your site does not have the Page Menu block enabled, WebTech can enable it for you. can enable it for you.
Blog Type
