Creating and Using HTML Jump-links

HTML jump links are a very handy trick for a developer or blogger to have up their sleeve.

Jump links behave just like regular links except instead of linking to a different page they link to a component of the page you’re already on. This is an invaluable HTML trick to know for situations where you have a long page or post that could benefit from a table of contents at the top of the page, each item of which jump links to a component further down the page. It aids the user experience tremendously and it’s quite easy to do, and here’s how.

Creating an HTML Jump Link Target

An HTML jump link has two parts.

Referring Link: The jump link to the destination or target location.
Target: The target or destination of the link.

This link jumps down to the related posts section at the bottom of this article. The link in this paragraph is the referring or jump link. The section you arrived at features the target location.

The target location is set by the HTML ID, a single-point, unique identification given to elements on a webpage. IDs differ from HTML classes because they are unique and only one can be found on a web page, whereas HTML and CSS classes are multi-point identifications given to multiple elements on a webpage. There can only be one instance of an ID on a webpage, but you can have an unlimited amount of instances of a class on a webpage.

Here’s a quick example of the syntax and how you might use an ID or a class for the same situation:

<h2 id="privacy">Privacy</h2>

<h3 class="subheader">Privacy</h3>

Due to the fact there can be unlimited instances of a class on a webpage, you can only jump link to an ID.

Coding a Jump Link

To set the jump link, you need something to link to and the link itself, so the first step in coding a jump link is picking an element to link to. This could be a subheader such as an H2 or H3 element, a paragraph (<p> tag), or even an image tag. Let’s say we want to link to an H2 element, we are going to simply add an ID tag to the opening tag of the H2 in the HTML:

<!-- Basic H2 tag -->
<h2>Real World Applications</h2>

<!-- Identified H2 tag -->
<h2 id="realworldapps">Real World
Applications</h2>

To create the link to the ID, you use a regular HTML Anchor Tag. Instead of our hyperlink reference being a full URL address, it will just be to the ID.

To create the ID link, hashtag in front of the ID word, just as you add a hashtag in front of an ID when using it in a CSS file. This identifies the identification word as an ID.

<a href="#realworldapps" title="Jump to: Real 
World Applications">Real World Applications</a>

The text “Real World Applications” behaves as a link. When clicked it will jump to the ID of “realworldapps” on the page, which we have defined to be a part of an H2 element. Pretty easy, huh?

Here are some things you need to know about creating jump links, specifically the ID names.

No Spaces: The ID word has no spaces. An ID like “Privacy Notice” will not work but “PrivacyNotice” or “privacy-notice” is acceptable.
Mixed Caps: The ID must be a single word with no spaces and may feature mixed capitalization such as “PrivacyNotice.”
Must Start With Letter: The ID is an alphanumeric term but it must start with a letter of the alphabet, not a number. An ID like “123Jump” is not acceptable, but “jump123” will work.
Use a Keyword: While not a requirement, it is often easier to write and remember keywords rather than code. An ID like “PrivacyNotice” or “privacy” is simple and clear, but “pn1” or “priv46aX8” is not. Both will work, but keeping the ID’s semantic and representative of their purpose makes life easier.

Using Jump Links: Table of Contents or FAQs

Now let’s talk about when and where you would actually use this. Have you ever been to a long legal page on a website where there was an HTML list at the top with hyperlinks to all the different legal sections, and when you clicked on the third link it jumped down the page to that section? You then read the section and at the end of it there was a “Back to Top” link you clicked which took you back to the table of contents at the top of the page.

This is an example of jump links working together within a page to create a fluid user experience. Each section of that legal page has an ID in its sub-header, the HTML list that holds the table of contents also has an ID. You click on a link in the list to jump down the page to that ID, and then click the link at the end of that section to jump back to the ID in the list. Here’s how! Let’s imagine a hypothetical legal page on a WordPress blog:

<ul id="tableofcontents">
    <li><a href="#copyright" title="Jump to: Copyright">
Copyright</a></li>
    <li><a href="#comments" title="Jump to: Comments Policy">
Comments Policy</a></li>
    <li><a href="#privacy" title="Jump to: Privacy Policy">
Privacy Policy</a></li>
    <li><a href="#contributor" title="Jump to: Contributor Guidelines">
Contributor Guidelines</a></li>
</ul>

<!-- First 3 Sections in Here -->

<h2 id="contributor">Contributor Guidelines</h2>
<!-- Section Text Here -->
<a href="#tableofcontents" title="Jump to: Table of Contents">
Back to top</a>

And really, that’s it! Link to each section in a table of contents, then at the end of each section link back to the table of contents. You can use this same approach to any kind of long article or page, i.e. an FAQ page.

Live Example

For a live example of how jump links work within a page check out the code and example below to experiment with this page! Good luck with your HTML jump links.

<p>Review a section of the article:</p>
<ul>
    <li><a href="#idandclass" title="Jump to: IDs and Classes">
IDs and Classes</a></li>
    <li><a href="#codingajump" title="Jump to: Coding a Jump Link">
Coding a Jump Link</a></li>
    <li><a href="#usingjumps" title="Jump to: Using Jump Links">
Using Jump Links</a></li>
</ul>

Review a section of the article: