← HTML & CSS

Headings (h1 to h6)

The most important HTML heading element - displays as the largest heading on the page. Headings range from <h1> (most important) to <h6> (least important).

Part of: HTML and CSS Journey — Module 8

What it does: Headings should descend in order: h1, h2, h3. Skipping levels breaks the document structure and accessibility. HTML has exactly six heading elements: <h1> through <h6>. There is no <h7> or higher. <h1> is the most important heading - it is the largest and should be used for the main page title. HTML tag names must be lowercase. The correct form is <h2> not <H2>. Heading elements are not self-closing. Each needs a closing tag: <h1>Title</h1>, not just <h1>Title. <h6> is the sixth and final heading level, producing the smallest heading text on the page. A closing tag requires a forward slash: </h2>. Writing <h2> a second time opens a new element rather than closing the first.

Common mistakes: HTML heading tags must be lowercase. <H1> with a capital H is non-standard. The correct form is <h1> and </h1> in lowercase. Heading levels should not be skipped. Jumping from h1 directly to h3 skips h2, which breaks the heading hierarchy.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Headings (h1 to h6) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which heading tag creates the most important and largest heading?

Matches

<H2>Section Title</H2>

↓

Heading tag names must be lowercase - <H2> should be <h2>

Applying

Meanings

Term

<h1>

Meaning

The most important HTML heading element - displays as the largest heading on the page. Headings range from <h1> (most important) to <h6> (least important).

Practice

<h1>My Website</h1>

Testing

Gaps

<>Welcome to My Page</h1>

Check Answer

Spots

1<H1>Main Title</H1>

2<h2>Subtitle</h2>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which heading tag creates the most important and largest heading?

A. <h1> ✓

B. <h6>

<h1> is the most important heading - it is the largest and should be used for the main page title.

2. How many h1 elements should a page typically have?

A. One ✓

B. As many as needed

A page should have exactly one <h1> for the main title. Multiple h1 tags break the page structure.

3. True or false: HTML has heading levels h1 through h7.

A. False ✓

B. True

HTML only has six heading levels: <h1> through <h6>. There is no <h7> element.

4. Which heading level comes directly after h2 in the correct hierarchy?

A. h3 ✓

B. h4

Heading levels should follow in order: h1, h2, h3, h4, h5, h6. Skipping levels breaks the document outline.

5. True or false: <H2> with a capital H is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. The correct form is <h2> not <H2>.

Match the Pairs

<h1>My Website</h1> → The most important heading - displays as the largest text and should appear once as the main page title

<h6>Fine Print</h6> → The least important heading level - displays as the smallest heading text

Heading levels should be used in order - never skip from h1 to h3 → <h1>Title</h1> <h2>Section</h2> <h3>Subsection</h3>

HTML provides six heading levels from most important to least important → <h1>One</h1> <h3>Three</h3> <h6>Six</h6>

<H2>Section Title</H2> → Heading tag names must be lowercase - <H2> should be <h2>

<h2>Intro<h2> → The closing tag must be </h2> with a forward slash - <h2> again is another opening tag

Key Term

<h1>

The most important HTML heading element - displays as the largest heading on the page. Headings range from <h1> (most important) to <h6> (least important).

Fill in the Blanks

1. <h1>Welcome to My Page</h1>

Hint: Type the most important heading tag name

2. <h2>About Us</h2>

Hint: Type the second-level heading tag name

3. <h3>My Hobbies</h3>

Hint: Type the closing tag name that matches the opening h3 tag

4. <body> <h4>Section Title</h4> </body>

Hint: Type the fourth-level heading tag name

5. <h6>Fine Print</h6>

Hint: Type the smallest and least important heading tag name

Spot the Error

Question 1

A <H1>Main Title</H1>

B <h2>Subtitle</h2>

C <h3>Section</h3>

Line A — HTML heading tags must be lowercase. <H1> with a capital H is non-standard. The correct form is <h1> and </h1> in lowercase.

Question 2

A <h1>Page Title</h1>

B <h3>Skipped Level</h3>

C <h2>Back to Two</h2>

D <p>Content</p>

Line B — Heading levels should not be skipped. Jumping from h1 directly to h3 skips h2, which breaks the heading hierarchy.

Question 3

A <h1>Title</h1>

B <h2>Intro</h2>

C <h2>About<h2>

D <p>Text</p>

Line C — The third heading is missing a closing </h2> tag. The second <h2> should be </h2> with a forward slash to close the element.

Question 4

A <h1>Welcome</h1>

B <h2>Section One</h2>

C <h3>Subsection</h3>

D <h7>Too Deep</h7>

Line D — There is no <h7> element in HTML. Headings only go from <h1> to <h6>. Use <h6> for the deepest heading level.

Question 5

A <body>

B <h1>Main Title</h1>

C <h2>Chapter One</h2>

D <h3>Topic</h3>

E <H4>Sub-topic</H4>

F </body>

Line E — <H4> with capital letters is non-standard HTML. All heading tags must be lowercase: <h4> and </h4>.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?