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

Last Updated : 30 Apr, 2025

Creating links that allow users to jump to different sections of a webpage can significantly improve navigation. This is especially helpful for long pages with a lot of content, as it helps users save time and find the information they need more quickly.

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".

Approach

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.

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

In this example:

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.

How to create links with 'target="_blank"' in Markdown ?

jymnjogiya

Improve

Article Tags :

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

Approach

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?