How to create links to sections within the same page in HTML ?

Last Updated : 03 Jul, 2025

Creating internal links that allow users to jump to specific sections within a webpage is a powerful way to improve user experience. Especially on long pages with extensive content, these anchor links can make navigation more efficient and intuitive. In fact, studies show that around 70% of users prefer websites with easy in-page navigation, as it helps them find relevant information faster without excessive scrolling. In this guide, we’ll explore how to create these jump links using HTML and best practices to implement them effectively.

Syntax

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

<a>: The anchor tag is used to define a hyperlink.
href="#section1": The href attribute specifies the target of the link. In this case, it points to a section id="section1" on the same page.
Section 1: The clickable text that appears for the user. When clicked, it will scroll to the section with id="section1".

How to Link to Sections Within the Same Page

Use the Anchor Tag <a>: In HTML, use the <a> tag to create links within the same page.
Assign Unique IDs: Assign unique IDs to different sections of the webpage using the id attribute.
Set the href Attribute: Set the href attribute of the anchor tag to “#section1” (replace “section1” with the desired ID) to link to a specific section.
Avoid Using Class Names in href: Class names are not unique identifiers and should not be used in the href attribute for internal linking.

Example: Below is an example where we divide the webpage into sections using <div>, assign unique IDs to each section, and use <a> tags in the navigation section with href=”#section1″ to enable users to navigate to specific sections with a click.

index.html

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100vw;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        .section {
            width: 100%;
            height: 100vh;
            /* Full viewport height */
            color: white;
            font-size: 2rem;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* Align text to the top */
            text-align: center;
            padding-top: 80px;
            /* Adds space to avoid being hidden behind fixed nav */
        }
        .one {
            background-color: #EF5354;
        }
        .two {
            background-color: #E03B8B;
        }
        .three {
            background-color: #3944F7;
        }

        .four {
            background-color: #38CC77;
        }
        .nav {
            position: fixed;
            top: 10px;
            width: 100%;
            background-color: #333;
            display: flex;
            justify-content: center;
            padding: 10px 0;
            z-index: 100;
        }
        .btn {
            color: white;
            background-color: #38CC77;
            height: 40px;
            width: 90px;
            padding: 2px;
            border: 2px solid black;
            text-decoration: none;
            display: inline-block;
            margin: 0 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#section1" class="btn">Section 1</a>
        <a href="#section2" class="btn">Section 2</a>
        <a href="#section3" class="btn">Section 3</a>
        <a href="#section4" class="btn">Section 4</a>
    </div>
    <div class="section one" id="section1">
        Section 1: Welcome to the first section!
    </div>
    <div class="section two" id="section2">
        Section 2: Here’s some content for the second section.
    </div>
    <div class="section three" id="section3">
        Section 3: More details and information here.
    </div>
    <div class="section four" id="section4">
        Section 4: Final section with additional content.
    </div>
</body>
</html>

Output

Code Overview:

This HTML code creates a webpage with a navigation bar at the top containing links to different sections of the page.
Each section has a unique background color and is 40% of the viewport height. Clicking a navigation button scrolls the user to the corresponding section.
The sections are styled with large text and centered content for easy readability.

Conclusion

Creating anchor links to sections within the same page in HTML is a way to enhance navigation and improve the user experience. By using the id attribute for target sections and the href attribute for linking, you can create seamless navigation for long pages, FAQs, or single-page websites. Additionally, using smooth scrolling and following best practices will ensure that your anchor links are user-friendly and accessible.

jymnjogiya

Improve

Article Tags :

How to create links to sections within the same page in HTML ?

How to Link to Sections Within the Same Page

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?