Hyperlinking

On this Page:

There are multiple ways to hyperlink information whether it be text, an email or an image. Here are some general rules to abide by when hyperlinking.

Basic Text

When linking text it is imperative that you follow the accessibility rules as outlined in the Web Accessibility: Being Inclusive on the Web training. Next you will highlight the text you would like to be linked and select the hyperlink icon. Finally, paste the URL into the field and select the apply button which looks like an arrow.

Email

When linking to an email you will need to do the following:

  1. Type out the email in your editor
  2. Highlight the email
  3. Select the hyperlink icon and type in “mailto:” followed by the email. Ex: mailto:Katrina.Frank@kzoo.edu
  4. Select enter or the apply button.

Images

If you were to link an image be sure to include alt text that describes the destination of the link, not the content of the image. Do not include alt text if the image and text are both linked.

Anchors

You can use HTML anchors to link to a specific section within a webpage with a heading. Many SCE’s use this when they have a long list of content such as departmental SIP requirements and various guidelines.

Directions on adding Anchors

  1. Highlight the text you would like the user to click on
  2. Select the hyperlink icon or Ctrl+K on your keyboard
  3. Type “#” and insert the anchor name you have chosen. Example #radish
  4. Hit “Enter” on your keyboard or the apply arrow button
  5. Select the heading on the page where you would like your user to be brought to.
  6. On the right sidebar expand the Advanced option and under “HTML anchor” enter the anchor name you have chosen without the “#.” Example: radish

Directions on adding Back to Top option

A “top” anchor is automatically included on every page. You can add a “Back to Top” link after any content section:

  1. Add a new paragraph block at the end of your content
  2. Type in the following: Back to Top
  3. Highlight the “Back to Top” text
  4. Select the hyperlink icon or Ctrl+K on your keyboard
  5. type #top
  6. Hit “Enter” on your keyboard or the apply arrow button