Anchor Jumps & Page Sectioning
What are Jump Links?
Imagine reading a thick book with a table of contents. Instead of manually flipping pages to find Chapter 5, you touch the chapter name and the book magically scrolls instantly to that exact page.In HTML, Jump Links (or anchor links) let you scroll the browser viewport automatically to a specific section on the *same* webpage.
To do this:
1. Give the target element a unique id (e.g., <section id="target-id">).
2. Create an anchor link where the href starts with a hash # followed by that ID (e.g., <a href="#target-id">).
Why does it matter?
Jump links are essential for long single-page websites, landing pages, and tables of contents (like Wikipedia). They allow users to jump straight to the information they need without manual scrolling.How to write it
Create a link pointing to the ID, and ensure a matching element exists on the page:<a href="#footer-section">Go to Footer</a>
<!-- ... lot of content ... -->
<footer id="footer-section">Footer Content</footer>
Click #target
id="target" section
Common Mistakes
# in the link: Writing href="footer-section" tells the browser to look for a page named "footer-section", whereas href="#footer-section" tells it to look for an element with that ID on the current page.id="footer-section", the browser will only jump to the first one it finds.Quick Reference
<a href="#id-name"> — Link that jumps to an element on the current page.<tag id="id-name"> — Target element with matching unique ID.Your Task
1. Create an anchor link `<a>` with `href="#footer-section"` containing 'Footer'.
2. Create a `<footer>` with `id="footer-section"` containing 'Footer Content'.
index.html
Type code above to start the lesson.
Live Preview