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

Last Updated : 12 Jan, 2024

In this article, we will see how to create links in their HTML page that are linked to the section of the same page. Creating internal links in HTML improves user experience by making navigation easier for website visitors. By using the id attribute and the a(anchor) tag, you can easily link to specific sections of a webpage, allowing quick access to needed information without scrolling through the entire page.

Syntax:

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

Approach :

Use the anchor tag `<a>` in HTML to create links within the same page.
Assign unique IDs to different sections of the webpage using the id 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 the href attribute, as they are not understood as unique identifiers for sections.

Example: we will 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

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Section links</title>
 
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            width: 100vw;
            height: 100vh;
        }
 
        .section {
            width: 100vw;
            height: 40vh;
            background-color: #EF5354;
            font-size: 50px;
            color: white;
            text-align: center;
            margin: 10px 5px;
        }
 
        .one,
        .three {
            background-color: #E03B8B;
        }
 
        .nav {
            width: 100vw;
            height: 40vh;
            background-color: #3944F7;
            font-size: x-large;
            color: white;
            text-align: center;
            margin: 10px 5px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            place-items: center;
        }
 
        .btn {
            color: white;
            background-color: #38CC77;
            height: 40px;
            width: 90px;
            padding: 2px;
            border: 2px solid black;
            text-decoration: none;
        }
    </style>
</head>
 
<body>
    <div class="nav">
        <a href="#section1" class="btn">1</a>
        <a href="#section2" class="btn">2</a>
        <a href="#section3" class="btn">3</a>
        <a href="#section4" class="btn">4</a>
    </div>
    <div class="section one" id="section1">
        section 1
    </div>
    <div class="section two" id="section2">
        section 2
    </div>
    <div class="section three" id="section3">
        section 3
    </div>
    <div class="section four" id="section4">
        section 4
    </div>
</body>
 
</html>