HTML Links Within the Same Page

To link to another location on the same page, give the destination an id and link to that fragment with href="#id". Modern HTML does not require an empty <a name="..."> anchor.

<a href="#faq">Jump to FAQs</a>
...
<h2 id="faq">Frequently Asked Questions</h2>

Same-page navigation example Top ↑

Go to the middle example · Go to the end example

Middle example Top ↑

This heading is the destination of #middle-demo.

End example Top ↑

This heading is the destination of #end-demo.

Link to a fragment on another page Top ↑

<a href="guide.html#examples">Examples in the guide</a>

Fixed-header spacing Top ↑

If a sticky header covers anchored headings, CSS scroll-margin-top can reserve space when the browser scrolls to the target.

h2 { scroll-margin-top: 5rem; }

Accessibility Top ↑

Use unique IDs, meaningful link text and headings that describe the destination. Fragment links are useful for tables of contents, FAQs and long reference pages.

HTML hyperlinks New-tab links

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: