How to link different sections of a same web page in HTML?

How to link different sections of a same web page in HTML

Suppose you are designing a web page using HTML which has different sections. Now you want that while scrolling the page, a link should be created on one section of the page which will jump you to another section of the same web page.

This method can be useful when you have 2 or more sections inside a webpage. Then this is a very good way for fast navigation between these sections.

How to link different sections of the same web page in HTML?

Doing this in HTML is possible with the anchor tag key. Till now you used to link one web page to another web page by using anchor tag <a>. But here we will learn to link two different sections of the same web page.

1. For demonstration we are creating 2 sections using the <div> tag on the web page here. These div’s ids will be “section1” and “section2” respectively.

<div id="section1">     </div>
<div id="section2">     </div>

2. To make the three sections stand out from each other, add some styling to these sections using CSS. For this, you can take this code.

<style>
        h1 {
            text-align: center;
        }
        
        #section1,
        #section2 {
            border: 2px solid red;
            margin: 30px;
            padding: 50px;
        }
    </style>

3. Put some content using the <p> tag inside both sections.

4. To link the first section to the second, use the anchor tag <a> and put the value “#section2” in the href.

<a href="#section2">Jump to Section-2</a>

5. Similarly, use the href=”#section1″ code to link the second section to the first.

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

6. In this way you can easily link 2 or more sections of any same webpage.

Final Code: HTML code for linking two different sections of the same webpage

We are providing the complete code of this solution below so that you can practice well on your end. You can create as many sections or divisions as you want on a webpage and link them together.

<!DOCTYPE html>
<html>

<head>
    <title>Linking Sections</title>


    <style>
        h1 {
            text-align: center;
        }
        
        #section1,
        #section2,
        #section3 {
            border: 2px solid red;
            margin: 30px;
            padding: 50px;
        }
    </style>

</head>

<body>

    <h1>This webpage have 3 section</h1>

    <div id="section1">

        <h2>First Section</h2>
        <a href="#section2">Jump to Section-2</a>
        <a href="#section3">Jump to Section-3</a>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel quia soluta excepturi eaque tempore? Reprehenderit possimus quas iste excepturi deserunt ea nobis facilis dolorem neque aliquam, veniam, nam minus.</p>
    </div>

    <div id="section2">

        <h2>Second Section</h2>
        <a href="#section1">Jump to Section-1</a>
        <a href="#section3">Jump to Section-3</a>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro tenetur nisi iure, animi quo ab doloremque, earum nobis quia nesciunt autem consequatur veniam velit enim accusantium sed laudantium facilis cum!</p>

    </div>

    <div id="section3">

        <h2>Third Section</h2>

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

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium magni distinctio est? Facilis explicabo ipsum eaque animi, ducimus perferendis veniam vero nostrum, aperiam unde ex quis reiciendis. Laborum, earum sapiente?</p>
    </div>



</body>
</html>

Download Full Code

Neeraj Yadav
Howdy Friends! I am Neeraj Yadav a professional Web and App developer. I am trying to share my knowledge through this website. Here you will get amazing coding projects, free courses, programming articles.