Creating Intra-Page Links in HTML

Link to content elsewhere on the same webpage

It’s extremely useful to be able to link to an exact location on an HTML page; especially if you’ve a very long document and want to navigate between sections with ease. This is where intra-page (or within-page) linking comes in handy. So, for the anchor use:

<a href="someUnqiueId">Link to specific location</a>

and for the linked destination use:

<span id="someUnqiueId">you will be directed to here</span>

For example, the following markup text:

<h3>TOC</h3>
<p><a href="#c1">Chapter 1</a></p>
<p><a href="#thisLocation">Random Location</a></p>
<p><a href="#c2">Chapter 2</a></p>
<p><a href="#c3">Chapter 3</a></p>
<h2 id="c1">Chapter 1</h2>
<p>Maecenas semper posuere tellus, non tincidunt lorem <span id="thisLocation">elementum</span> ut. </p>
<h2  id="c2">Chapter 2</h2>
<p>Praesent mattis nec velit eget tempus. </p>
<h2 id="c3">Chapter 3</h2>
<p>Sed eleifend blandit felis sit amet ornare. </p>

Produces the following …


TOC

Chapter 1

Random Location

Chapter 2

Chapter 3

Chapter 1

Maecenas semper posuere tellus, non tincidunt lorem elementum ut.

Chapter 2

Praesent mattis nec velit eget tempus.

Chapter 3

Sed eleifend blandit felis sit amet ornare.