Heading hierarchy as a document outline

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which heading structure forms a correct outline?

A h1, then h3, then h2

B h1, then h2, then h3

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

A One, for the page title

B One for every paragraph

3. Which choice skips a heading level?

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<h1>Skate Park Guide</h1>		A<h1>Movies</h1> <h2>Action</h2> <h3>Top Picks</h3>
2<h2>Safety Rules</h2> <h3>Helmets</h3>		B<h1>Class Blog</h1> <h2>Week 1</h2> <h2>Week 2</h2>
3Headings go in order and do not skip levels, so an h2 comes after the h1 and an h3 after an h2		CThe single main title of the page, used once, which sits at the top of the outline
4A page should have only one h1, and sections under it use h2		DA section with a subsection nested directly under it, with no level skipped
5<h1>Gaming Club</h1> <h3>Meeting Times</h3>		EThe h3 skips the h2 level, so the outline has a gap. Use h2 for this section heading.
6<h1>Home</h1> <h1>About Us</h1> <h1>Contact</h1>		FThere are three h1 headings, but a page should have only one. The other two should be h2 section headings.

Definitions

h1, h2, h3

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<__>School Canteen</h1> <h2>Lunch Menu</h2>

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

<h1>Climate Change</h1> <h2>Causes</h2> <__>Burning Fuels</h3>

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

<h2>Tickets</h2> <h3>Student Prices</h3> <__>Venue Info</h2>

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <h1>School Canteen</h1>

B <h2>Menu</h2>

C <h4>Hot food</h4>

D <h2>Prices</h2>

Question 2

A <h1>Study Guide</h1>

B <h3>Maths</h3>

C <h3>Algebra</h3>

D <h3>Geometry</h3>

Question 3

A <h1>My Band</h1>

B <h2>Members</h2>

C <h3>Lead singer</h3>

D <h1>Gigs</h1>

Question 4

A <h1>Climate Facts</h1>

B <h2>Causes</h2>

C <h3>Burning fuel</h2>

D <h2>Effects</h2>

Question 5

A <h2>Gaming Club</h2>

B <h2>Events</h2>

C <h2>Rules</h2>

Answer Key

Heading hierarchy as a document outline

Section A: Quick Questions

B — h1, then h2, then h3

A — One, for the page title

A — <h1>Pets</h1> then <h3>Dogs</h3>

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

A — By jumping from heading to heading

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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

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

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>.

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

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>.