Anchors and Hyperlinks

Definition

An anchor is a webpage element that allows users to quickly jump to a specific spot of a webpage without having to scroll, typically on the same page but less routinely on a different page.  

A hyperlink is a webpage element that leads users to a different webpage without typing in a URL address.

Usage and Specifications

Anchors enable users rapid navigation to a different section of a web page or to a different web page without the use of scrolling.   

Hyperlinks enable users navigation around a website by enabling clickable links to carry users to different internal website locations or can lead to external website locations. 

Anchors and hyperlinks can be either relative or absolute:

  • Relative links offers users the path to a file within a website, e.g., /content/adding-anchors
     
  • Absolute links offers users the full and complete URL address, e.g., https://sites.columbia.edu
Always use relative links when linking to content within the same site; only use absolute links when jumping to a different website.

As the names suggest, relative links are somewhat flexible and absolute links are not. Relative links will always link to the same node/page, even if the page title (URL) changes. Absolute links are inflexible and will always link to exactly the URL in the link; if the page title changes, the link will be broken. Thus, always use relative links when linking to content within the same site; only use absolute links when jumping to a different website.

Placing an Anchor Within the Same Page

Step 1

  • Open a webpage in Edit mode.
  • In a new browser tab, open the same page but in View mode.
  • While in the View mode, scroll to the content you want to place an anchor.
  • On the left side of that content, hover or click and a blue link icon will appear.
  • Click on the link icon; then scroll to the URL browser bar, which will update with an appended anchor location.
  • Highlight and copy the appended portion only, including the # sign.
the anchor link on the left of the image
what text to copy

Step 2

  • Navigate back to the webpage in Edit mode.
  • Select/highlight the content you want to link to the anchor.
  • When anchoring to text, create a hyperlink using the "link" icon in the text format bar (WYSIWYG) and paste the appended portion only, including the # sign.
  • When anchoring to an image or icon, use the "link" field and paste the appended portion only including the # sign.
  • Save the webpage.
Display of the formatting menu bar highlighting the link icon
where to insert link

Placing an Anchor to a Different Page

Step 1

  • Open the web page into which you want to insert an anchor in Edit mode.
  • In a new browser tab, open the page you want to link to in View mode.
  • While in View mode, scroll to the content you want anchored.
  • On the left side of that content, hover or click and a blue link icon will appear.
  • Click on the link icon and scroll to the URL browser bar, which will update with an appended anchor location. 
  • Highlight and copy the extended portion of the updated link starting with "/content" (/content/grid-widths#!#single_image-1572)
text displaying url details for anchoring to another page

Step 2

  • Navigate back to the webpage in Edit mode.
  • Paste url portion to text; creating a hyperlink.
  • When anchoring to text, use the "link" icon in the Text format menu bar (WYSIWYG) and paste the full URL.
  • When anchoring to an image or icon, use the "link" field and paste the full URL.
  • Save the page.

Creating a Hyperlink

To create a hyperlink, first copy the URL of the page you want to link to. Next, highlight the text you want to link to the other page. Use the "link" icon in the Text format menu bar (WYSIWYG) and paste the full URL. Save this configuration in the pop window; then save the webpage.