An in-page link

We found an excellent article to post on the blog. But the article is long, and it would make it easier for the reader if we added navigation to various parts of it. This navigation won’t lead the reader to other pages. Rather, it should only guide the reader to different parts of the article on the page, like a Table of Contents

We use in-page links to create such a navigation. This is a regular link whose address contains the # character, which is immediately followed by the element’s id. The ID is created using the id attribute. It specifies where on the page you are taken when you click on the link.

Here is an example of an address consisting of an in-page link:

<a href="#part1">Chapter 1</a>

When you click on such a link, the browser will find an element on the page with the corresponding attribute id and scroll the page window to it.

<section id="part1">Contents of Chapter One</section>

In this case, the page will not reload. If, for some reason, the browser can’t find the an element with that ID on the page, it will simply do nothing and remain where it was.

An in-page link can also be used in absolute addresses. In this case, after the desired page is loaded, the browser will scroll to the specified part of this page.