freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 4.3 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Linking to sections within a page

This lesson covers

  • Fragment identifiers and the id attribute
  • Building a table of contents
  • Linking to a section on another page
  • Back to top links and skip links

Short answer

To link to part of a page, give the target element an id, then link to it with a hash: href="#prices". This is called a fragment identifier or jump link. It powers tables of contents, back to top links, and the skip to content link at the top of this page.

Two steps

<!-- 1. Give the section an id -->
<h2 id="prices">Prices</h2>

<!-- 2. Link to it with # -->
<a href="#prices">Jump to prices</a>

The id must be unique on the page, with no spaces. Use lowercase words joined by hyphens, like room-rates.

A table of contents

<nav aria-label="On this page">
  <ul>
    <li><a href="#rooms">Rooms</a></li>
    <li><a href="#rates">Rates</a></li>
    <li><a href="#directions">How to get here</a></li>
  </ul>
</nav>

Long guides become much easier to scan. Google sometimes shows these section links in search results, called jump to links.

Linking to a section on another page

<a href="/resort/#directions">Directions to the resort</a>
<a href="https://example.com/faq/#refunds">Refund policy</a>

Add the hash and id after the page URL.

<body id="top">
  <a class="skip" href="#main">Skip to content</a>
  ...
  <main id="main">...</main>
  ...
  <a href="#top">Back to top</a>
</body>

A skip link lets keyboard users jump past the menu straight to the content. Press Tab once on this page to see it. href="#top" also scrolls to the top in all modern browsers.

Try it: build a table of contents

Add ids to the three headings, then make the list into jump links. Click them in the preview.

Live preview

Quick quiz

1. Which attribute does a jump link target?
2. How do you link to id="rates"?
3. Can two elements share one id?
4. What does a skip link help?

Common mistakes

  • Spaces in ids. id=“room rates” fails. Use room-rates.
  • Mismatched case. #Rates will not match id=“rates” reliably.
  • Duplicate ids. The link jumps to the first match only.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Fragment identifier
The # part of a URL that points to an id.
Jump link
A link that scrolls to a section.
id attribute
A unique name for one element.
Skip link
A link that lets keyboard users skip to main content.
Table of contents
A list of jump links to page sections.

Questions beginners ask

Can I make the scroll smooth?

Yes, with CSS: html { scroll-behavior: smooth; }.

Do jump links help SEO?

They help usability and can earn jump to links in Google.

Why does my heading hide under a sticky header?

Use CSS scroll-margin-top on the target.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.