HTML anchors: use href for navigation and stable fragment targets

Use it for a real task

A receipt index links to a specific record and to an explanation lower on the same page. The fragment target is an id on the destination heading. Relative paths keep the example on the same origin, while the visible link text says what will open rather than relying on surrounding text.

<nav aria-label="Receipt navigation">
  <a href="/receipts/R-47">Open receipt R-47</a>
  <a href="#export-policy">Read the export policy</a>
</nav>
<section aria-labelledby="export-policy">
  <h2 id="export-policy">Export policy</h2>
  <p>Only approved receipts are included.</p>
</section>

What the markup guarantees

The path route needs a server that serves that record; HTML alone does not create the endpoint. Use a button for a local action such as submitting a form, and use an anchor for navigation.

Cost and limits

Links require no JavaScript. Broken paths and duplicate ids are the practical failure modes, so check internal destinations as part of publishing.

Common Mistakes

Do not use href='#' as a fake button.
A fragment id must be unique within its document.
Describe the destination; repeated 'click here' labels lose context.

Connected lessons

Continue with HTML global attributes: keep id, class, and data-* jobs separate.

Further CSS decisions

CSS scroll offsets: reveal anchors below a persistent header

Rendering decisions

CSS scroll-behavior: make smooth jumps optional

Related CSS decisions

CSS :target: confirm the section reached by a fragment

Continue with the connected Web Development lesson: URLs and origins: separate location, query, and fragment.