Last updated:
After trying links on Playcode123.com, use them to help readers move through a longer project page. This tutorial builds a contents list for a webpage checklist. It starts with ordinary HTML links so navigation remains useful without JavaScript.
Two kinds of internal navigation
A link to another page on your own site might use href="about.html". A link to a location in the current page uses a fragment such as href="#images". This project concentrates on fragments.
A fragment needs a matching destination id. The name after the hash must match the id exactly. The visible link text can be different: “Check the images” can point to the short id images.
Create a page long enough to test
Save the example as checklist.html and open it in a browser. Each practice section has a minimum height so the scrolling effect is easy to see. That spacing is for this demonstration; your real article can use its natural content height.
Use the local file for the first test. An embedded editor may handle navigation differently from a normal browser tab. If a link behaves unexpectedly in a preview, compare the same saved file before assuming your HTML is wrong.
Complete example to try locally
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A project checklist</title>
<style>
body{font-family:system-ui,sans-serif;line-height:1.6;margin:0;padding:24px;color:#172b3a;background:white}main{max-width:720px;margin:auto}a{color:#145da0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #145da0;outline-offset:3px}input,select,textarea,button{font:inherit;max-width:100%;box-sizing:border-box}
section{min-height:70vh;padding:24px 0}h2{scroll-margin-top:24px}
</style>
</head>
<body>
<main>
<h1 id="top">My webpage checklist</h1>
<nav aria-label="Checklist sections">
<ul>
<li><a href="#files">Check the files</a></li>
<li><a href="#images">Check the images</a></li>
<li><a href="#finish">Finish the review</a></li>
</ul>
</nav>
<section aria-labelledby="files">
<h2 id="files">Check the files</h2>
<p>Confirm that index.html is saved in the correct project folder.</p>
<p><a href="#top">Back to the checklist title</a></p>
</section>
<section aria-labelledby="images">
<h2 id="images">Check the images</h2>
<p>Compare every image filename with the path written in the HTML.</p>
<p><a href="#top">Back to the checklist title</a></p>
</section>
<section aria-labelledby="finish">
<h2 id="finish">Finish the review</h2>
<p>Save, refresh, and test each navigation link once more.</p>
<p><a href="#top">Back to the checklist title</a></p>
</section>
</main>
</body>
</html>Test the contents list
Choose Check the images. The address should acquire #images, and the images heading should move into view. Choose its Back to the checklist title link: you should return to the heading at the top.
The top destination really is at the top. Putting id="top" on an element near the bottom would create a working link to the wrong place. Destination names have no built-in meaning to the browser.
Why href matters
Keep href on navigation links. It supplies the destination and supports normal link behaviour, including keyboard activation and copying the link address. A clickable-looking element with only an onclick handler is not a good replacement for this basic navigation.
Our example needs no scrollIntoView function. If you later add JavaScript as an enhancement, preserve useful destinations and test with the script unavailable. Also check browser Back behaviour instead of only testing the forward jump.
Find and fix navigation mistakes
- Nothing happens: look for a destination whose id matches the fragment exactly.
- You reach the wrong section: search for duplicate ids left behind by copied sections.
- The link opens a different file: check whether the href contains a filename before the hash.
- A heading hides behind a fixed header: adjust scroll-margin-top to leave room for that header.
- You expected a large movement on a short page: the browser cannot scroll past the document’s end.
Exercise: add an accessibility check
Add a contents link called “Check keyboard navigation” pointing to #keyboard. Create a matching heading and section before Finish the review. Include a back-to-top link.
Solution: the link is <a href="#keyboard">Check keyboard navigation</a>, and the destination heading starts with <h2 id="keyboard">. Test both directions, then make sure no second element uses that id.
Link to a section from another page
Once the checklist works, another HTML file in the same folder can link to checklist.html#images. The filename chooses the document; the fragment chooses the location within it.
This is useful when an image tutorial points directly to the image-checking step rather than the top of a long checklist. If you rename a destination id later, update links that refer to it.
Before you finish
Use Tab to focus a contents link, then press Enter. Check the visible focus outline and confirm the destination is understandable. Keep the straightforward jump unless smooth movement improves the experience; decorative animation is not required for useful navigation.
Continue your project
Paths, Folders & File Names is a useful next step. Return to the HTML examples on Playcode123.com whenever you want to review the basic syntax.
Further reference
Technical reference: MDN: the anchor element.