Create an Anchor Link to Jump to Specific Part of a Page
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.
<a href="#content">Go to Content</a>
When you click on the hyperlink, the browser will jump to the element with the ID
For example, here's an example HTML page with a jump link:
<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:
<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:
<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:
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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!