Visual guide · Knowledge graph

HTML Headings (h1–h6)

HTML headings (<h1> through <h6>) create the outline of a page: one main title, then section and subsection titles — for readers, accessibility tools, and search engines.

Reading ·: 12 min
Practice ·: 20 min
Level ·: Beginner

Completion goal: Build a page outline with one h1 and sequential h2/h3 sections.

h1
h2
outline
accessibility
SEO

Learning path

HTML Beginner Path

Skills you'll learn

Semantic HTML
Accessibility
Content Outline

Quick answers

What is this?

HTML headings (<h1> through <h6>) create the outline of a page: one main title, then section and subsection titles — for readers, accessibility tools, and search engines.

Why use it?

Headings create the table of contents of a page for humans and assistive tech.

When should you use it?

Use headings for titles and section labels — not for making text look big.

Advantages

Scannable pages
Screen-reader navigation
SEO clarity

Watch-outs

Skipping levels for “looks” harms meaning

Learning objectives

Use a single clear <h1> for the page topic
Nest heading levels as an outline (h2 under h1, h3 under h2)
Avoid skipping levels just to change font size
See how headings improve scanning and SEO

Visual diagram

Think of headings as a table of contents drawn into the page itself.

Visual memory trick

Headings are chapter titles in a book

h1 is the book title; h2 are chapters; h3 are chapter sections.

Animation preview

Visual concept: heading levels mirror a document outline — not decoration sizes.

Interactive animation lives in the classroom — Start Interactive Lesson.

Where you'll use this

Blogs
Articles need clear structure so readers can scan titles and paragraphs.
News websites
Stories are hierarchical: headline, subheads, then body text.
Portfolio
Personal sites showcase sections with headings and short paragraphs.
E-commerce
Product pages rely on headings, copy blocks, and semantic regions.

Real-world use cases

Blog posts
Article title as h1; each section as h2; optional h3 subsections for deep topics.
Documentation
API or tutorial pages rely on heading outline so “on this page” menus can be generated.
Screen reader navigation
Many users jump by headings. A logical outline is an accessibility feature, not optional polish.

Code example & output

headings.html

<h1>Learn HTML Headings</h1>
<h2>Why outline matters</h2>
<p>Headings help people scan the page.</p>
<h2>How to nest levels</h2>
<h3>Stay sequential</h3>
<p>Do not jump from h1 to h4 without a reason.</p>

Output preview

Large page title, two section titles, and one subsection title with paragraphs between.

Size comes from the browser’s default stylesheet. Meaning comes from the level you choose. Use CSS later if you need a different look without changing the outline.

Try it in the interactive lesson →

Common mistakes

Multiple h1s for style
Avoid: Every big title is an <h1>.
Do: Prefer one h1 that names the page. Use h2+ for sections.
Skipping levels for looks
Avoid: <h1> then immediately <h4> because it “looks smaller.”
Do: Pick the correct level, then style with CSS if needed.
Using headings for non-titles
Avoid: Wrap a whole paragraph in <h2> to make text bold.
Do: Use <p> for paragraphs and <strong> for emphasis.

Common interview questions

How many h1 elements should a page usually have?

Prefer a single h1 that names the page topic; use h2+ for sections.

Why not skip from h1 to h4?

Heading levels communicate hierarchy. Skipping confuses outline navigation.

Mini quiz

Check your understanding — no account needed.

1. To make text smaller you should…

FAQ

How many heading levels exist?

Six: h1–h6. Most beginner pages only need h1–h3.

Do headings affect Google rankings?

Clear, descriptive headings help people and crawlers understand topics. They support SEO; they are not a magic keyword trick.

Can I style headings freely?

Yes with CSS — keep the semantic level correct and change appearance separately.

Where this skill is used

Frontend Developer
Component headings must stay semantic for a11y.
Content-focused Web Designer
Information architecture starts with headings.

Projects using this concept

Article outline
Blog post with h1 title and h2 sections.
beginner · HTML
Docs mini-page
Tutorial page with h2 steps and h3 notes.
beginner · HTML

← HTML Document Structure HTML Paragraphs →

Parent: HTML Document Structure

Related guides

Glossary

Course: HTML Fundamentals · Full glossary · Career path

Start Interactive Lesson

Continue in Avora's visual classroom with synced narration, checks, and playgrounds. Module 1 is free.

Start Interactive Lesson View course