How to Create a Link to Jump to a Specific Part of a Page [Quick Tip]

How to Create a Link to Jump to a Specific Part of a Page [Quick Tip]


When most people think of hyperlinks, they think of connecting two different web pages — such as a blog and landing page — together. But that’s not all hyperlinks can do, they can link to jump to a specific part of a page as well.

So remember that really exhaustive glossary you put together on industry terms your audience should know? Now, when you refer to something you said elsewhere in that article, you can actually link to it — making it much easier for your audience to figure out what the heck you’re talking about. Want to see what I mean? Just click here.

Pretty cool, right? The best part about it all is that it’s super easy to do yourself, even if you don’t have extensive HTML knowledge. If the HTML-speak feels confusing, just follow along with the real-world examples below.

Note: If you are a HubSpot customer, follow these instructions.
→ Download Now: SEO Starter Pack [Free Kit]

How to Link to a Specific Part of a Page

Allowing people to effectively “jump” to a certain part of a webpage can help your business grow better and make your content more convenient for visitors to your site — but you have to make sure you do everything just right. Here’s how to add jump links to your content, step-by-step.

1. Name the object or text you want to link to.

In a normal linking scenario, whatever you need to link to has a URL of its own. However, in this scenario, you’re not linking to a new page with its own URL — so you have to make up a name for the link’s destination.

I’d recommend using a word or phrase that describes the link’s destination. If you use a phrase, use underscores between each word instead of spaces, otherwise the code won’t work.

Example

Let’s say we wanted to link to an example of a company using Facebook ads in a post. Here’s what I’d use as my object’s name:

facebook_ads_example

Now, onto the next step.

2. Take the name you’ve chosen, and insert it into an opening HTML anchor link tag.

In other words, replace the red section of the tag below with the name you chose in the previous step:

<a id=”https://blog.hubspot.com/marketing/INSERT_YOUR_OBJECT_NAME_HERE“>

Example

 

<a id="https://blog.hubspot.com/marketing/facebook_ads_example">

3. Place that complete opening <a> tag from above before the text or object you want to link to, and add a closing </a> tag after.

Doing this sets the location of the link. This is what your code should look like now:

<a id=”INSERT_YOUR_OBJECT_NAME_HERE”>The object you want to link to.</a>

Example

 

<a id="facebook_ads_example">This is the Facebook ad example I want to link to.</a>

4. Create the hyperlink that’ll take you to that text or object.

Now, go to the part of the post you’d like to have the hyperlink in. You’ll need to add a typical hyperlink HTML markup, but in the part where you’d typically include a URL, you’ll include the pound symbol (#) then the name of the object you’re linking to. Here’s what it looks like:

<a href=”https://blog.hubspot.com/marketing/#INSERT_YOUR_OBJECT_NAME_HERE“>Click here to see the content below.</a>

Example

 

<a href="https://blog.hubspot.com/marketing/#facebook_ads_example">Click here to see an example of how a company uses Facebook ads.</a>

And then you’re all set — you have a functioning hyperlink between two pieces of content on the same page. Simple as that.

(Hey there, curious folks from the introduction! Click here to go back to where you left off.)

marketing

Originally published Jul 27, 2022 7:00:00 AM, updated July 27 2022

Topics:

Content Creation Resources

10 thoughts on “How to Create a Link to Jump to a Specific Part of a Page [Quick Tip]

  1. Pretty nice post. I just stumbled upon your weblog and wanted
    to say that I’ve truly enjoyed browsing your
    blog posts. After all I’ll be subscribing to your
    feed and I hope you write again soon!

  2. You are so cool! I do not suppose I’ve read anything like this
    before. So great to discover another person with a few genuine thoughts on this subject matter.
    Really.. many thanks for starting this up. This website is something that’s needed on the internet, someone with some originality!

  3. Pretty section of content. I just stumbled upon your website
    and in accession capital to assert that I get actually enjoyed account your blog posts.
    Any way I will be subscribing to your feeds and even I achievement
    you access consistently quickly.

  4. Hello! Quick question that’s entirely off topic. Do you know how to make your site mobile
    friendly? My blog looks weird when browsing from my apple iphone.
    I’m trying to find a template or plugin that might be able to fix this issue.
    If you have any suggestions, please share. Many thanks!

  5. Thank you for еvery other fantastic post. Where else ϲoulⅾ anybody get that kind of info in such
    an ideal means of writing? І’ve a presentation subsequent week, and I am ɑt
    the look for such information.

  6. I have been surfing online more than three hours today, yet I never
    found any interesting article like yours. It is
    pretty worth enough for me. In my opinion, if all web owners and bloggers made good content
    as you did, the internet will be much more useful than ever before.

    Feel free to surf to my website :: 먹튀사이트

  7. I quite like reading through an article that will make men and women think.

    Also, thanks for allowing for me to comment!

  8. Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment
    didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to
    say superb blog!

  9. I have read so many posts about the blogger lovers however this post is actually a good
    piece of writing, keep it up.

Leave a Reply

Your email address will not be published.