How do I link to another section of a page?

Improve Article

Table of Contents Show

How do I link to a section on one page?
How do I link to a specific part of a page in Chrome?
How do I link to a different part of a page in HTML?
Can we link two sections of the same page?

Save Article

Read

Discuss

Improve Article

Save Article

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>

Output:

linking to the section of same page

How do I link to a section on one page?

You can also use this method to create a website on a single page..

Step 1 - Create your sections. ... .

Step 2 - Add a section link to the site menu. ... .

Step 3 - Select the section you want to link to. ... .

Step 4 - Check if the sections are created. ... .

Step 5 - Move the sections around. ... .

Step 6 - Done!.

How do I link to a specific part of a page in Chrome?

To create a link that opens directly to highlighted text:.

On your computer, open Chrome..

Go to a page with text you want to share..

To highlight the text you want to share, click and hold, then drag your mouse..

To open the context menu, right-click on the highlighted text..

Select Copy link to highlight..

How do I link to a different part of a page in HTML?

“<a>” tag is used to embed links in HTML. The specific link is placed between the opening “<a>” and closing “</a>” tags. <a> tags with the href attributes are used to embed a link to any targeted section of the page. Hash symbol “#” and the section “id” are also mentioned in href for creating a jump link.

Can we link two sections 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. 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.