freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 3.1 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

HTML headings: h1 to h6

Your roadmap for this lesson

  • The six heading levels
  • Building an outline with heading levels
  • Why size is not the reason to pick a heading
  • How screen reader users jump between headings

Short answer

HTML has six heading levels, <h1> to <h6>. <h1> is the main topic of the page, <h2> marks major sections, and <h3> marks subsections inside those. Pick a level by its place in the outline, not by how big it looks. You can change size later with CSS.

Six levels

<h1>Visiting Albay</h1>
<h2>Things to do</h2>
<h3>Cagsawa Ruins</h3>
<h3>Mayon Skyline View Deck</h3>
<h2>Where to eat</h2>
<h3>Bicol Express spots</h3>

Read only the headings and you get the whole outline of the page. That is the goal.

Heading levels as an outline

Think of a table of contents:

  • h1: the book title. Use one per page.
  • h2: chapters.
  • h3: sections inside a chapter.
  • h4 to h6: deeper levels, rarely needed on simple pages.

Go down one level at a time. Do not jump from h2 to h4. You can jump back up at any time, for example from h3 to the next h2.

Do not pick headings by size

Browsers show h1 large and h6 small by default. Beginners often choose h4 because it looks right. That breaks the outline. Choose the correct level, then style the size with CSS.

Also, do not use a heading just to make normal text bold. Use <strong> for that.

Why headings matter for accessibility

Many screen reader users navigate by headings. In NVDA or VoiceOver, they press a key to jump from heading to heading, like skimming. A clean heading structure lets them find the section they need in seconds. Search engines also use headings to understand the topics on a page, which you will cover in Lesson 9.2.

Try it: fix the outline

This menu page uses headings by size and skips levels. Make one h1, use h2 for the menu groups, and h3 for each dish.

Live preview

Quick quiz

1. How many h1 elements should a typical page have?
2. After an h2, which heading comes next for a subsection?
3. How should you choose a heading level?
4. Who uses headings to jump around a page?

Common mistakes

  • Skipping levels. Going from h2 to h4 confuses the outline.
  • Using headings for bold text. Use <strong> for emphasis inside a paragraph.
  • No h1 at all. Every page needs a clear main heading.

Your action

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

Key terms

Heading
An element from h1 to h6 that titles a section.
Heading hierarchy
The order of heading levels that forms an outline.
Screen reader
Software that reads a page aloud, like NVDA or VoiceOver.
Document outline
The structure formed by a page's headings.

Questions beginners ask

Can I have more than one h1?

HTML allows it, but one h1 per page is clearer for readers and the common best practice.

Should the h1 match the title tag?

They can be similar. The title is for search results. The h1 is for people already on the page.

Can I put a link inside a heading?

Yes. <h2><a href="...">Text</a></h2> is valid.

Related lessons

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