HTML jump links are a very quick and easy way to create shortcuts to specific, targeted sections or areas within your content. Your readers will be able to click a link, have the destination page load in their browser, and then they’ll get a little “jump” down to that specific section within that page.
These links are sometimes referred to as “bookmark links” or “advanced organizer” links. Or at least that’s what they used to be called when I first became familiar with them…
Whatever they’re called – there are 2 primary uses for these types of anchor links, as outlined below.
Type #1: links that will allow you to jump down or up to a specific part of the same webpage you’re on.
Creating the destination link
Let’s say you have a heading in your page that introduces a new topic. But your page is quite long and you have lots of different topics and headings. In order to keep people using your website from having to scroll endlessly — if they are only interested in one certain topic it is best to allow them to jump right to that topic.
In order to do this you’ll need to scroll down (or up) to that heading, then create a destination or target link within the html heading “h” tag, like this:
<h3 id=”target1″>Here is a Fascinating New Topic</h3>
Creating the source/starting link
Then, somewhere else within the same webpage go ahead and create the source link using the usual anchor “a” tag as well as the “#” symbol, like this:
<a href=”#target1″>Jump Me to Fascinating Topic on This Page</a>
Hot tip from the Dragon:
Make sure that the source link and target link are an exact match.
Here’s an example of this type of jump link in action:
take me to the bottom of this article.
The old way used the “name” attribute as well as the “a” anchor tag itself, like this:
<a name=”target1″>Fascinating New Topic Starts Here</a>
or like this:
<a name=”target1″></a>Fascinating New Topic Starts Here
Using “a name” is deprecated now and should not be used; however, links coded this way may still work.
One of the most common uses for jump links are “Back to Top” links, to take your readers from the bottom of an article, post or page back up to the top. It just makes it a bit easier for them.
Type #2: links that will allow you to jump over to a certain location within a separate webpage.
Creating the destination link
Let’s say you have a heading in your destination page that introduces a new topic. In order to link a starting (or “source”) page to that heading, you’ll need to create a destination link or target link somewhere within your ending (or “destination”) page, within the html heading “h” tag, like this:
<h2 id=”target2″>A Fascinating New Topic Starts Here</h2>
Creating the source/starting link
Then, somewhere within your source webpage go ahead and create the source link using the usual anchor “a” tag to code the url, as well as the “#” symbol added to the end of the url. And after the “#” that’s where you would add the exact same target name that you used within the source page.
Like this:
<a href=”/my-website/sample-page.html#target2″>Link to Fascinating Topic on a New Page</a>
That should bring your readers right to that exact spot and topic that they’re looking for.
Here’s an example of this type of jump link in action: take me to the middle of a different article.
Hi there! This is the bottom of the article.
🙂
If you would like to learn more about the HTML anchor element in a more general sense, please check out our related article How to Create an HTML Anchor Link.
Thanks for reading!
