← Years 9–10 Data & Information

Heading hierarchy as a document outline

Heading tags that nest in order with no skipped levels: one h1 for the page title, h2 for sections, h3 for subsections. This forms an outline that people and screen readers can navigate.

Part of: 9-10 Digital Technologies: Representing online documents — Module 19, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 13

Understanding Heading hierarchy as a document outline in Years 9–10 Data & Information

What it does: This code goes h1, then h2, then h3, with no gaps, so the outline is clear for readers and software. One h1 names the page and the h2 headings mark its sections, so the structure stays clean and easy to navigate. Headings should nest in order. A subsection (h3) belongs inside a section (h2), which belongs inside the page title (h1). Going from h1 straight to h3 leaves a gap in the outline. The h2 level is missing. Choose the heading level by its place in the outline. Change the size with CSS instead. The h1 is the page title. Main sections of the page use h2.

Common mistakes: This jumps from h2 to h4 and skips h3. A subsection under an h2 should be an h3: <h3>Hot food</h3>. The page goes from h1 straight to h3, skipping h2. The Maths section should be <h2>Maths</h2>.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Heading hierarchy as a document outline to a class →

This module's key terms are also in a printable crossword (Modules 17–51) and word search (Modules 6–132).

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which heading structure forms a correct outline?

h1, then h3, then h2h1, then h2, then h3

Matches

<h1>Gaming Club</h1> <h3>Meeting Times</h3>

↓

The h3 skips the h2 level, so the outline has a gap. Use h2 for this section heading.

Applying

Meanings

Term

h1, h2, h3

Meaning

Heading tags that nest in order with no skipped levels: one h1 for the page title, h2 for sections, h3 for subsections. This forms an outline that people and screen readers can navigate.

Practice

<h1>Study Guide</h1>

Testing

Gaps

<>School Canteen</h1>

Check Answer

Spots

2<h2>Menu</h2>

3<h4>Hot food</h4>

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.

Add to class →

Quick Questions

1. Which heading structure forms a correct outline?

A. h1, then h3, then h2

B. h1, then h2, then h3 ✓

Headings should nest in order. A subsection (h3) belongs inside a section (h2), which belongs inside the page title (h1).

2. How many h1 headings should a typical web page have?

A. One, for the page title ✓

B. One for every paragraph

One h1 names the whole page. Sections then use h2 and subsections use h3.

3. Which choice skips a heading level?

A. <h1>Pets</h1> then <h3>Dogs</h3> ✓

B. <h1>Pets</h1> then <h2>Dogs</h2>

Going from h1 straight to h3 leaves a gap in the outline. The h2 level is missing.

4. A student uses h4 for a title because it looks small and neat. What is the problem?

A. There is no problem, because headings are only for making text smaller

B. Heading levels show structure, not size, so h4 here breaks the outline ✓

Choose the heading level by its place in the outline. Change the size with CSS instead.

5. How does a screen reader user often move around a long page?

A. By jumping from heading to heading ✓

B. By reading every word from the top

Software can list the headings as an outline. This only works well if the levels are in order.

Match the Pairs

<h1>Skate Park Guide</h1> → The single main title of the page, used once, which sits at the top of the outline

<h2>Safety Rules</h2> <h3>Helmets</h3> → A section with a subsection nested directly under it, with no level skipped

Headings go in order and do not skip levels, so an h2 comes after the h1 and an h3 after an h2 → <h1>Movies</h1> <h2>Action</h2> <h3>Top Picks</h3>

A page should have only one h1, and sections under it use h2 → <h1>Class Blog</h1> <h2>Week 1</h2> <h2>Week 2</h2>

<h1>Gaming Club</h1> <h3>Meeting Times</h3> → The h3 skips the h2 level, so the outline has a gap. Use h2 for this section heading.

<h1>Home</h1> <h1>About Us</h1> <h1>Contact</h1> → There are three h1 headings, but a page should have only one. The other two should be h2 section headings.

Key Term

h1, h2, h3

Heading tags that nest in order with no skipped levels: one h1 for the page title, h2 for sections, h3 for subsections. This forms an outline that people and screen readers can navigate.

Fill in the Blanks

1. <h1>School Canteen</h1> <h2>Lunch Menu</h2>

Hint: Type the tag for the main page title. A page should only have one of these.

2. <h1>My Gaming Blog</h1> <h2>Game Reviews</h2> <h3>Minecraft</h3>

Hint: Type the heading level for a main section that sits directly under the page title.

3. <h1>Climate Change</h1> <h2>Causes</h2> <h3>Burning Fuels</h3>

Hint: Type the heading level for a subsection directly under a section, without skipping a level.

4. <h1>Music Festival</h1> <h2>Line-up</h2> <h3>Friday Acts</h3>

Hint: Type the closing tag name that matches the subsection heading's opening tag.

5. <h2>Tickets</h2> <h3>Student Prices</h3> <h2>Venue Info</h2>

Hint: Type the heading level for a new main section that starts after a subsection ends.

Spot the Error

Question 1

A <h1>School Canteen</h1>

B <h2>Menu</h2>

C <h4>Hot food</h4>

D <h2>Prices</h2>

Line C — This jumps from h2 to h4 and skips h3. A subsection under an h2 should be an h3: <h3>Hot food</h3>.

Question 2

A <h1>Study Guide</h1>

B <h3>Maths</h3>

C <h3>Algebra</h3>

D <h3>Geometry</h3>

Line B — The page goes from h1 straight to h3, skipping h2. The Maths section should be <h2>Maths</h2>.

Question 3

A <h1>My Band</h1>

B <h2>Members</h2>

C <h3>Lead singer</h3>

D <h1>Gigs</h1>

Line D — A page should have only one h1, which is the page title. Gigs is a main section, so it should be <h2>Gigs</h2>.

Question 4

A <h1>Climate Facts</h1>

B <h2>Causes</h2>

C <h3>Burning fuel</h2>

D <h2>Effects</h2>

Line C — The opening tag is h3 but the closing tag is h2. The tags must match, so it should end with </h3>.

Question 5

A <h2>Gaming Club</h2>

B <h2>Events</h2>

C <h2>Rules</h2>

Line A — The page title should be the single h1 at the top of the outline. With h2 first, the page has no h1. It should be <h1>Gaming Club</h1>.

Student with a class code? Join your class →