HTML Bookmarks: Linking to a Section of the Same Page

A link can point to a specific place on a page. This is useful on long pages such as guides and documentation.

Step 1: give the target an id

index.html

HTML

<h2 id="returns">Returns</h2>

Step 2: link to it with #

Put # and the id in the href.

index.html

HTML

<p><a href="#returns">Jump to returns</a></p>

<h2 id="shipping">Shipping</h2>
<p>We ship within two working days. <br><br><br><br><br><br><br><br><br><br></p>

<h2 id="returns">Returns</h2>
<p>You can return a book within 14 days.</p>

Link to a section on another page

Add the fragment after the page address.

index.html

HTML

<a href="policies.html#returns">Read our returns policy</a>

A back to top link

Link to # or to the id of the top of your page.

index.html

HTML

<a href="#top">Back to top</a>

Make a table of contents

index.html

HTML

<nav aria-label="On this page">
  <ul>
    <li><a href="#a">Section A</a></li>
    <li><a href="#b">Section B</a></li>
  </ul>
</nav>
<h2 id="a">Section A</h2>
<p>Content for A.</p>
<h2 id="b">Section B</h2>
<p>Content for B.</p>

warning

Duplicate or changing ids

If two elements share an id the link goes to the first one only. If you rename an id, update every link that points to it.