askvity

How to Create a Link to Jump to a Specific Part of a Page in HTML

Published in HTML Anchors 4 mins read

To create a link that jumps to a specific part of the same page in HTML, you need two things: an anchor at the destination and a link pointing to that anchor.

Understanding HTML Anchors

The core concept involves marking a specific point on your page with a unique identifier. This identifier acts as the "anchor" or "target" that your link will jump to. In modern HTML, this is primarily done using the id attribute.

Creating the Target (The Anchor)

You can add an id attribute to almost any HTML element you want to jump to. The value of the id attribute must be unique within the entire page.

Based on the provided reference:
In the HTML code, you can insert the anchor using the format id=“anchor\_name” within the <p> tag. Note: IDs on a page must be unique, and can't be re-used for other anchors.

Here's how you would create an anchor point, for example, within a paragraph:

<p id="section1">This is the beginning of Section 1, which our link will jump to.</p>

You can use any descriptive name for anchor_name, but it should start with a letter and contain only letters, numbers, hyphens (-), underscores (_), colons (:), and periods (.). It is recommended to use simple, descriptive names like introduction, conclusion, contact-info, etc.

Remember, the id value must be unique on the page.

Creating the Link (The Jumper)

Once you have created an anchor with a unique id, you can create a standard hyperlink (<a> tag) that points to it. The href attribute of the link should contain the hash symbol (#) followed by the id name you defined for your anchor.

Here's the structure:

<a href="#anchor_name">Link Text Here</a>

Using the example above, the link to jump to the paragraph with id="section1" would look like this:

<a href="#section1">Jump to Section 1</a>

Putting It All Together: A Complete Example

Let's see how the anchor and the link work together within a simple HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Jump Example</title>
</head>
<body>

    <h1>My Document Title</h1>

    <p><a href="#section1">Go to Section One</a></p>
    <p><a href="#section2">Go to Section Two</a></p>
    <p><a href="#section3">Go to Section Three</a></p>

    <!-- Add some space to make scrolling visible -->
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id="section1">Section One: Introduction</h2>
    <p>This is the content of the first section. We can jump directly here using the link above.</p>

    <!-- Add some space -->
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id="section2">Section Two: Main Content</h2>
    <p>More interesting information in the second section. Notice how the ID is on the H2 tag here.</p>

    <!-- Add some space -->
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id="section3">Section Three: Conclusion</h2>
    <p>The final section of the document. Using IDs is a common practice for navigation within a long page.</p>

</body>
</html>

In this example, clicking "Go to Section One" will scroll the page down to the <h2> element with id="section1". Note that while the reference specifically mentions using id within a <p> tag, you can also use it on other elements like <h2>, div, section, etc., as demonstrated in the example. The key is the unique id.

Summary Table

Component HTML Element/Attribute Purpose Example
Target id="anchor_name" Marks the destination point <p id="my-target">...</p>
Link <a href="#anchor_name"> Creates the clickable link <a href="#my-target">Jump</a>

Key Considerations

  • Unique IDs: As stated in the reference, each id value on a single page must be unique.
  • Placement: While you can place the id on the exact element you want to jump to, sometimes placing it on a containing element (like a <div> or a heading tag <h2>) might provide better visual positioning after the jump, depending on CSS styling and fixed headers.
  • Page Load: The jump happens client-side instantly once the link is clicked, without reloading the page.
  • Linking from another page: You can also link to a specific section of another page by adding the hash and ID to the end of the page's URL (e.g., <a href="another_page.html#section1">Go to Section 1 on another page</a>).

By using the id attribute to create anchors and the href="#id_name" syntax in <a> tags, you can effectively create internal links that allow users to jump to specific points within your HTML document.

Related Articles