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

09 Aug, 2021
In this article, we will see how to create “links” in their HTML page which are linked to the section of the same page. In order to achieve this, we need to have some prior knowledge of some HTML features anchor tag with the “href” and class and id.
Approach: Since we now know that the anchor tag <a> is used for creating any link.  we also know that “href” can hold the link address. But in our case, we want to link to the section of same page, in that case we will use id to identify different sections of our web page . These ids then can be passed to the href as shown below:
Syntax:
<a href="#section1" >section 1</a>
In this case, the id “section1” can be given to any component or section of our web page. The above link will point to the section that has the id section1. Here href attribute knows that the  “section1” is not an ordinary link rather it is an id by providing “#” in the beginning. it is also obvious that we should not use class names in the href attribute as they are not understood by the href attribute. Also, the class names are not unique in the document so it does not make sense to use them as an identifier to a particular section.
Example: In this example, we are dividing our web page into different sections using div, The first section has class “nav”. we can see  that this section has <a> tags to navigate to different sections of our page. Then we have four sections, each is uniquely identified with the ids such as “section1′′,”section2” and so on. This ids are given to the href of the <a> tags in the navigation section. whenever the user clicks on the <a> tag,it links the user to the particular section.
Below is the implementation of the above approach:
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>
linking to the section of same page
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Attributes
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?