Ultimate Quick Guide to Create & Use HTML Jump Links

When it comes to hyperlinks, what you may likely think about is the HTML anchor tags used in either connecting web pages within your website or linking a web page on a different website. But, did you know you could create hyperlinks within the same web page?

Using html jump links on a web page have its own benefits. Perhaps, it might be one of the features that will instantly improve the User Experience (UX) of your website. This is because html jump links makes it easy for users to locate specific information on a webpage.

One example of a website that uses html jump links to improve usability is Wikipedia. Wikipedia uses jump links to aid users go to specific parts of an article.

What is a Jump Link?

A Jump link is a hyperlink that directs you to a particular section of a web page when clicked on.

Like a normal html link, a jump link can be created in html using texts, images or icons; however, rather than take you to a different web page entirely, a jump link simply directs you to a particular section of the same web page.

How to Create a Jump Link in 3 Simple Steps

To create a jump link, you should have a bit of knowledge on how to use an anchor tag <a></a>. Other than that, you're good to go!

1. Name the sections

Identify the object or section of the page you want to link using HTML id="" or name=""

Assuming you have a table of content comprising of the sub topics you want to write on — each sub topic may also be the starting point of the individual section of your article.

This means that you can choose to give EACH individual sub topic (Only the subtopics that represents the starting point of each section) a UNIQUE id or name. That is to say you will end up with id="name_of_the_section" OR name="name_of_the_section".

2. Position the chosen identifier

Place your chosen id or name in the opening tag of the HTML element you used in enclosing each sub topic

In our case, we will use an id as our identifier.

Like so: <h2 id="name_of_the_section"></h2>

3. Create a Link to your table of content or Button

Insert the name of your chosen id preceded by a "#" symbol into the href attribute of an anchor tag wrapped around each sub topic representing your table of content.

The anchor will serve as the link to the section of the page and its content.

Examples of how html jump link can be used

Jump Links Using Texts

<a href="#name_of_the_section">Text to link</a>

Jump Links Using an Image

<a href="#name_of_the_section"><img src="example_image.png" alt="Your alt Text" /></a>

Jump Links Using an Icon

<a href="#name_of_the_section"><i class="fa fa-sikademy"></i></a>

Jump Links Using an Absolute URL

<a href="http://www.example.com/folder_name#name_of_the_section"></a>

Jump Links Using a Relative URL

<a href="/folder_name#name_of_the_section"></a>

If you carefully followed these steps, then you should have a fully functional jump link. Otherwise, crosscheck for possible errors.

2 Main Reasons Your Jump Links may not Work Correctly

Sometimes you may discover that after following these steps, your jump links may not work at all or function appropriately. These two common errors may likely be the problem:

Error Caused by Multiple uses of Identifier

Jump links may not work as required if you use more than one "id" or name selector for more than one element.

Solution: Each "id" or "name" tag should be unique.

Error Caused by Misspelling of Identifier

A jump link may not work properly if the link is capitalized or misspelled in such a way that it differs from the unique id.

Solution: Your unique id should be the same as your link. E.g. if the "id" is my_chosen_id, then the link should also be #my_chosen_id

Applications and Uses of Jump Links

Create links within a page

Jump links can serve as a very effective and efficient way of structuring the contents on a web page.

Since most web users get turned off by websites without proper structure, it is beneficial to use HTML jump links on a website to improve the "Findability" of information in long-form articles and blog posts.

This, in turn, helps to tweak your website’s structure and performance.

Design a single-page website

Most single-page websites operate using the principle of jump links. That is, each section of the website is simply given a hyperlink pointing to a specific area.

For instance, the navigation of a single-page website may have a link to "about section", "services section", and "address section". When you click the "about" navigation button, it takes you to a section of the web page where the ‘about’ information is located.

The same logic applies to every single navigation button on the page.

Organize glossary and/or table of contents on a web page

Assuming you want to write a long-form article consisting of several topics and contents, a jump link can easily come in handy to facilitate how your intended audience access the article. A more desirable way will be to create a table of content using the subheading that points to the area of the page where the information lies.

For the most part, this single feature will eliminate unnecessary and time-consuming scrolls; thereby, making your article more efficient.

Wrapping off

The web is becoming increasingly competitive with several websites competing for readers and relevance.

In order to keep your users satisfied, jump links may come in handy for a quick sectional-navigation of long-form articles.