How to Link to a Section of a Page in HTML

1. Create a Link to a Section of an Internal Page in HTML
2. Create a Link to a Section of an External Page in HTML

This article introduces how to link to a certain part of a page in HTML.

Create a Link to a Section of an Internal Page in HTML

You can use the anchor tag <a> to create hyperlinks in HTML. The href attribute in the <a> tag contains the destination URL.

Example Code:

Welcome to <a href="https://www.delftstack.com/">DelftStack</a>

We’ve linked an external link to the webpage in the above code. It is a straightforward approach.

Sometimes you might need to create internal links within the page. For that, we create bookmarks using the id attribute.

You can write the id of the particular element in the href attribute in the anchor tag to create an internal link in HTML. So, when you click the link, it will direct you to the section that matches the particular id.

Let’s have the following example. There are eight Harry Potter books with headings and some content, and suppose you have to read chapter 8, which is at the bottom of the page.

You can create a link to the particular section(headings) so the user does not have to scroll up and down every time. You can give the id to each heading and create a link to those ids at the top of the page.

For example, set T1 as <h2>’s id for Chapter 1. Similarly, set the id of the other headings as T2 …T8.

Now that you have created the id for each heading, it’s time to create hyperlinks for them. Create anchor tags for each chapter at the top of the HTML document, and in the href attribute, set the value as #T1, #T2 till #T8.

Code - HTML:

<h1 id="top">Harry Potter Books</h1>
    <p><a href = "#T1">Chapter 1</a></p>
    <p><a href = "#T2">Chapter 2</a></p>
    <p><a href = "#T3">Chapter 3</a></p>
    <p><a href = "#T4">Chapter 4</a></p>
    <p><a href = "#T5">Chapter 5</a></p>
    <p><a href = "#T6">Chapter 6</a></p>
    <p><a href = "#T7">Chapter 7</a></p>
    <p><a href = "#T8">Chapter 8</a></p>

<div class="chapter">
    <h2 id="T1">Chapter 1</h2>
    <p>The Philosopher's Stone</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T2">Chapter 2</h2>
    <p>The Chamber of Secrets</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T3">Chapter 3</h2>
    <p>The Prisoner of Azkaban</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T4">Chapter 4</h2>
    <p>In The Goblet of Fire</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T5">Chapter 5</h2>
    <p>In The Order of Phoenix</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T6">Chapter 6</h2>
    <p>In The Half-Blood Prince</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T7">Chapter 7</h2>
    <p>The Deathly Hallows</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="chapter">
    <h2 id="T8">Chapter 8</h2>
    <p>The Cursed Child</p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<a href="#top"> Top </a>

Code - CSS:

.chapter {
    margin-bottom: 50px;
}

You can now click on the chapter at the top; the link will direct you to the particular chapter. This is how you can create internal links within a webpage in HTML.

Create a Link to a Section of an External Page in HTML

We can link to a section or content on another page using a similar method.

Example Code:

<a href="another_page.html#C4">Jump to Chapter 4 of another_page</a>

A hyperlink is created that directs to the section of an external page. The external page contains an element whose id is C4.

<!--Inside another_page.html-->
<h1 id="C4">
    This is Chapter 4.
</h1>

Let’s implement this method and create an HTML document that links to a section of a Wikipedia page.

For example, let’s have the following Wikipedia page, https://en.wikipedia.org/wiki/HTML, which is about HTML. Our goal is to create an external link to the Delivery section of this page.

First, inspect the webpage and locate the Delivery section.

As shown in the Inspector, the id for the Delivery section is Delivery. Append the id at the end of the page’s URL in href as follows in HTML.

Example Code:

<a href="https://en.wikipedia.org/wiki/HTML#Delivery"> HTML Delivery</a>

When you click the link, then the HTML Delivery section of Wikipedia opens up. Thus, you can create an external link in HTML.