Page Anchors & In-Page Navigation
Build “jump to section” links — the kind used in long articles and one-page websites.
What you will learn
- Give an element an id
- Link to a section on the same page
- Understand how one-page sites navigate
The id attribute
Any element can be given a unique name with the id attribute. Think of an id like a house address — unique on the page, so links can find it.
<h2 id="contact">Contact Us</h2>This heading now has the name contact thanks to id="contact". On its own the id changes nothing you can see — it just gives this element a unique label so a link can target it, which we do next.
Jump to it
To link to that section, use href="#contact" — the # followed by the id. Clicking it scrolls the page to that element.
<a href="#features">Jump to Features</a>
<a href="#contact">Jump to Contact</a>
<h2 id="features">Features</h2>
<p>Lots of text so the page is tall enough to scroll...</p>
<p>... more text ...</p>
<p>... even more text ...</p>
<h2 id="contact">Contact</h2>
<p>You jumped here!</p>The two links at the top point to #features and #contact — the # plus an id. Lower down, two headings carry those matching ids. Click a link and the browser scrolls straight to the heading whose id matches, instead of loading a new page.
Tip: This is exactly how “one-page” websites work: the menu links (Home, About, Contact) all point to # ids on the same long page.
Note: Sometimes you will see %20 in web addresses — that is a space, URL-encoded. Browsers encode unsafe characters (space, &, ?) so addresses stay valid. You rarely type this by hand.
Q. To link to an element with id="pricing" on the same page, the href should be:
✍️ Practice
- Build a long page with three sections (each with an
id) and a menu at the top that jumps to them. - Add a “Back to top” link that jumps to an
id="top"on the first element.
🏠 Homework
- Turn one of your earlier pages into a one-page site with a jump menu to each section.