Anchors can be used to jump to specific tags on an HTML page. The <a>
tag can point to any element that has an id
attribute. To learn more about IDs, visit the documentation about Classes and IDs. Anchors are mostly used to jump to a subsection of a page and are used in conjunction with header tags.
Suppose you've created a page (page1.html
) on many topics:
<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>
Once you have several sections, you may want to create a Table of Contents at the top of the page with quick-links (or bookmarks) to specific sections.
If you gave an id
attribute to your topics, you could then link to them
<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
Now you can use the anchor in your table of contents:
<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>
These anchors are also attached to the web page they're on (page1.html
). So you can link across the site from one page to the other by referencing the page and anchor name.
Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.