Skip to main content Skip to secondary navigation

Jump links using ID tags

Main content start

Rather than starting at the top of the page, you can use jump links (also known as anchor links) to direct visitors to a specific part of a page.  You can also use jump links for in-page links such as footnotes.

Here are examples of in-page jump links: 

Components for jump links

To create jump links you will need to directly edit the HTML using source. Here's where you can learn more about inspecting and modifying source code. A jump link consists of a destination and one or more jump links pointing to that destination. 

The destination

A destination consists of an id attribute and value such as: id=unique-name  to an HTML element. Elements that accept id attributes include headings (<h2>-<h5>) and <span>s. The destination will be included in a heading using the following format:

<h[2-5] id="[unique-name]">[heading name]</h[2-5]>

or

<span id="[unique-name]">[text]</span>

The unique-name will need to be

  1. Unique on the page.
  2. Machine readable: lower case with dashes but no spaces.

For example:

<h3 id="create-destination">Create the destination</h3>

The jump link

A  jump link is consists of a "#" and the id attribute value #unique-name appended to a link. The jump link will use this format:

[URL]#[unique-name]

An external link example:

https://sitesuserguide.stanford.edu/tour/paragraphs/text-area/add-links-text/jump-links-using-id-tags#create-destination

An in-page link example:

#create-destination

Create the destination

To create the jump link destination add an unique "id" attribute and value to a heading. To do this, you'll need to edit the HTML source code. Learn about editing source code

Consider using ID attributes that describe your content. It allows you to reorder your content and the resulting URL will also describe the content.

  1. In the WYSIWYG on a separate line, enter the text for your destination.
  2. With your cursor on the destination text, select the heading, e.g. Heading 2, from the paragraph format dropdown menu in the WYSIWYG toolbar. 

    Screenshot illustrating how to create the destination for a jump link
  3. Reveal the underlying HTML by clicking on Source in the WYSIWYG toolbar.
  4. Find the heading with destination text. It'll be of the form <h2>destination text</h2>. Hint: You can use "cmd-F" or "ctrl-F" to find the text.
  5. As part of the first heading tag, (before the first ">"), add the id,
    e.g. <h2 id="dest-text">destination text</h2>.

    Screenshot illustrating how to create the destination for a jump link in the source code

    Hint: It's best to use lower case when creating IDs. 

  6. Save your work.

A jump link is a typical URL with an appended #destination. The "destination" is the unique name that you used in Create the destination above. 

If both the jump link and destination are on the same page, the jump link need only use #[unique-name], e.g.

<a href="#dest-text">Jump link text</a>
Screenshot illustrating how to create an in-page jump link

To create a jump link that will work from anywhere within your website, append the #destination to the page URL, e.g.

node/1166#create-destination

Screenshot illustrating how to create a jump link to another page within the website

Use jump links to create footnotes

A footnote is a short piece of text, often numbered, placed at the bottom of a printed page, that adds a comment, citation, reference etc, to a designated part of the main text, for example.1 

You can use jump links to add footnotes to your content. To do this, you'll need to edit the HTML source code. Learn about editing source code

Creating the footnotes (the destination) in the footer

  1. Add a horizontal line at the end of the text for your page.
  2. Add the text for each of your footnotes after the horizontal line.
  3. Click Source in the WYSIWYG toolbar
  4. Using the <span> tag, prepend a unique ID to the  footnote such as:
    <p> 
      <span id="footnote-01">[1]</span> Footnote text 
    </p>

Adding the footnote references (the jump link) to the text

Use the link functionality to create a link from the footnote reference to the footnote. With both the text and the footnote on the same page, you identify the link by prepending a '#' to the name of the jump link.

  1. Scroll back up on the page and place the footnote references or numbers in your text (e.g. footnote reference example 1).
  2. Using the link functionality, highlight and add a link to the number. For the Link URL, add a URL of the form #[footnote ID], such as:
    #footnote-01 

     
    Screenshot illustrating how to add a jump link to a footnote
  3. Apply the superscript functionality "footnote reference example.1" on the footnote reference.
  4. Repeat these steps for each footnote reference you want to include on your page.

[1]  Example footnote

Inspect your work

You can use the browser to inspect the destination. Here's how to do this for most browsers:

  1. Move your mouse pointer over the destination text.
  2. Right-click or use a two-fingered click to bring up the menu.
  3. Select Inspect. This will bring up the developer tools with the HTML for the destination highlighted. In the HTML you should see the destination name.

Troubleshooting jump links

  • The WYSIWYG editor can detect invalid links and remove them.
  • If the destination URL changes, it may break your jump link. It is then necessary to recreate them. 
  • If the link is not working check that the ID is unique. All ID tags must be unique on the page. 
  • If you use the full URL for in-page links, they will break if you ever change the URL or page name. Just use the # suffix. 
    For example, instead of:
    /students/student-pages#hobbies
    Just use 
    #hobbies

Related Topics

Learn about the options for adding links to any text area, including email links.