HTML Links for Bookmarks

HTML Links can also be used to define bookmarks to different sections of an HTML document.

Bookmarks are useful to quickly jump to a specific section of a webpage, which can be the same webpage or another webpage.

In order to create a bookmark, two things are required.

  • Add id attribute to the container that contains section content
  • Add a bookmark to the section using HTML link element by assigning href value to section ID value with a # before the ID value as shown below.
<div id="sectionA">
    <h2>Section A</h2>
    <p>Content goes here..</p>
</div>
<a href="#sectionA">Section A</a>

Bookmark to a section on another webpage

Assuming the other webpage as another-webpage.html and it contains section A with id value defined as id="sectionA", then the bookmark has to be defined as below.

<a href="another-webpage.html#sectionA">Another Webpage Section A</a>

Example

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Link over a Container</h1>
    <a href="#sectionA">Section A</a>
    <a href="#sectionB">Section B</a>
    <a href="#sectionC">Section C</a>
    <a href="another-webpage.html#sectionA">Another Webpage Section A</a>
    <hr>
    <div id="sectionA" style="border:2px solid green; height: 800px;">
        <h2>Section A</h2>
        <p>Content goes here..</p>
    </div>
    <div id="sectionB" style="border:2px solid blue; height: 800px;">
        <h2>Section B</h2>
        <p>Content goes here..</p>
    </div>
    <div id="sectionC" style="border:2px solid red; height: 800px;">
        <h2>Section C</h2>
        <p>Content goes here..</p>
    </div>
</body>
</html>

Overall

HTML links can be used to create bookmarks for web pages that contain too much content segregated into different sections.

Related Articles