What is an href?

Apr 12

An href (Hypertext REFerence) is HTML code that allows you to link to other webpages or internet sources, or to other places on your page. Additionally, hrefs can also be used to pull up email addresses and even phone numbers. We will explore various applications for hrefs in this post. First, let’s learn the parts of an href:

The href is within an HTML attribute called the anchor tag <a>. The anchor tag has two parts: the first part defines the beginning of the hyperlink, and the closing anchor tag </a> indicated the end of the link. You can have text or a picture between the <a> and the </a> tags, and whatever you put in between will be linked. The action that happens when the user clicks on the hyperlinked text is whatever you define with the href. In the example above, when the word “Resources” is clicked, the user will to go the website: https://bit.ly/2PN8jDu.

How to hyperlink in Canvas

Putting a basic hyperlink in Canvas is simple. In the Rich Content Editor (RCE), all you need to do is paste or type out the link where you want students to go and the press space. You will notice the text color turns blue with an underline. You can click on the hyperlink to pull up the Link Options menu. From there you can determine the link and the text that will appear on screen. You can also access the Link Options menu be pressing Ctrl + K (command + K on Mac), or by clicking the link dropdown button on the RCE and choosing External Links.

In the HTML editor, you will look for code that has the components: <a>, href="URL" (within the <a>), content, and finally </a>.

What can I link to in Canvas?

The most obvious places to hyperlink to would be websites or online resource pages, or places within Canvas, such as an assignment, announcement, syllabus, etc. To link to a course link in Canvas, you will want to use the RCE. Type out the word(s) you want hyperlinked and highlight them, then click on the link icon on the RCE and select where you want the students to go.

A lot of professors and instructors don’t realize the extent of the course navigation options. You can send students to the announcements page, or to a particular announcement. You can hyperlink the gradebook, the syllabus, or a particular assignment or page. You can even send students to a particular module or to any page within a module. You can also incorporate global navigation simply by dragging and dropping the links on the global navigation onto your Canvas page, so you can refer students to their calendar or inbox. Often if I find that students don’t/didn’t understand an element of an assignment, I’ll direct them via hyperlink to a particular announcement where I delineated requirements and expectations.

Some href tips

Undecorated hyperlinks

In the video for this blog, I demonstrated how to apply undecorated styling to hyperlinks. By default, hyperlinks in Canvas will change the color of the text to blue and put an underline under the words. You can remove the styling by adding a line of code within the anchor tag <a>:

style="text-decoration: none; color: #2b3842;"

What "text-decoration: none;" determines is that the hyperlinked text will not be underlined. The color and code is overriding the default blue and specifying another color. Just be wary that blue underlined text is a fairly universal indication that the text is hyperlinked (and thus, clickable). There are exceptions, such as the links on this blog. But you do have the options to determine the colors you want to use. A good resource for exploring colors is https://coolors.co/.

mailto:

Another fun one is to replace the https:// with a mailto: option. Essentially, instead of specifying that the clickable hyperlink pulls up a website, instead it will begin drafting an email for the student. The easiest way to create a mailto: hyperlink is to simply do a good search for “mailto link generators” and choose any one of the options that comes up on the first page, such as this good one: https://mailtolinkgenerator.com/

Simply enter in the information for the email: address(es), subject (optional), body (optional). Honestly, give it a try - it’s a lot of fun.

Open link in new tab

If you are linking to an outside webpage within Canvas, the page will automatically open in a new tab in the browser. But if you want to have control over it an ensure that it opens in a new tab, or if you want to open a link to another place within your Canvas course in a new tab, then put this line of code anywhere within the anchor tag <a>:

target="_blank"

Pictures

In addition to hyperlinking text, you can also hyperlink pictures. You can do this in the HTML editor by finding your picture (look for the <img> tag) and putting an anchor around it, such as:

<a href="https://bit.ly/2PN8jDu">PICTURE</a>

Or in the RCE, simply click on the picture and either press Ctrl (command) + K or click the External Link icon and specify the web address.

Return to top (of page)

A very simple line of code will bring your students back to the top of you Canvas page:

You can call that text whatever you want: return to top, back to top, bounce back up, top of page, start over, etc. Regardless the hyperlinked text, it will take your students to the top of the current page.

Adding a call link

This is a bonus that I didn’t cover in the video for this post - a small reward for those who are reading this far. You can use an href to create a call link, which tells the browser to call a phone number. On mobile then clicking on the number will prompt the student to call (or message) it. On a computer then the link may pull up a default phone service such as skype to place a call (for skype specifically, you can use “callto:” to open skype). You can choose the hyperlinked text to be the actual phone number or it can be descriptive text (what will happen when they click or tap):

<a href="tel:719-266-2837">call now</a>

<a href="tel:719-266-2837">719.266.2837</a>

You can also add extensions and country code: <a href="tel:+1719-266-2837p2">Click to call</a>

I’ve talked in depth about how to create a table of contents on a Canvas page. It’s incredibly helpful to organize and guide students as they navigate complex pages with a lot of content, such as a course over, a capstone project summary, or a syllabus. You can essentially hyperlink any text to take the student anywhere on the page by using some simple HTML code. Feel free to read our more thorough blog post or check out our Canvas Table of Contents video:

Key Takeaway

Hyperlinks are very simple web functions, but with a little tinkering you can find some very interesting applications in your Canvas course. The applications for hyperlinking will depend on your Canvas content and by what you are trying to do and how willing you are to explore options. I don’t just want to show you how to do these things, but I want you to experiment on your own and create interesting Canvas pages for your students.

Happy teaching and learning!

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer