Home»Blog»Create an Anchor Link to Jump to Specific Part of a Page

Create an Anchor Link to Jump to Specific Part of a Page

Updated onFeb 04, 2022byAlan Morel

#html

Create an Anchor Link to Jump to Specific Part of a Page

Create a Jump Link
Jump Link to Another Page
Jump Link to Another Website
Conclusion

Anchor links in HTML are a useful way to direct users to where you want them. In this post, we'll learn how to use an anchor link in HTML to jump to a specific part of a page.

When you create an anchor link, you can specify a specific part of the page to jump to, thereby creating a jump link.

Create a Jump Link

To create a jump link, you can use the <a> tag with the id attribute. The href attribute specifies the ID of the element to jump to.

Let's look at an example of a jump link in HTML.

HTML
<a href="#content">Go to Content</a>

When you click on the hyperlink, the browser will jump to the element with the ID content.

For example, here's an example HTML page with a jump link:

HTML
<html>
    <head>
        <title>My Page</title>
    </head>
    <body>
        <h1>My Page</h1>
        <a href="#content">Go to Content</a>
        <p>This is my page.</p>
        <p id="content">
            The content of the page.
        </p>
    </body>
</html>

In the example, clicking on the link will jump to the element with the ID content and skip what is above it.

You can add the id attribute to any element in your HTML. Here are some examples of other elements that can have an ID:

HTML
<h3 id="content">Content</h3>
<p id="content">The content of the page.</p>
<img id="content src="image.png" />

Jump links will go to any element with the specified ID.

Jump Link to Another Page

You can also create jump links to another page in the same domain. Simply add the target ID to the end of the URL.

Here is an example of a jump link to another page on this site:

HTML
<a href="/classes/html/introduction#prerequisites">HTML Prerequisites</a>

Jump Link to Another Website

You can even create jump links to another page on another website. To do this, add the full URL to the href attribute, followed by the target ID.

Here is an example of a jump link to another website:

HTML
<a href="https://en.wikipedia.org/wiki/JavaScript#History">JavaScript History</a>

Conclusion

In this post, we've learned how to make an anchor link jump to a specific part of the page. We've also learned how to create a jump link to another page on the same site, and how to create a jump link to another website.

Hopefully, this has been helpful to you and you can continue learning more about HTML!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!