Semantic layout landmarks (header, nav, main, footer)

The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.

Part of: HTML and CSS Journey — Module 22

What it does: <main> wraps the page's central content. Only one is permitted per page. <nav> semantically identifies the site navigation. Screen readers announce 'navigation landmark' when users reach it. <header> is the visible page header landmark. <head> is the document metadata element - they are completely different. <nav> is the HTML5 semantic element for navigation. <menu> is not the standard choice for site navigation. <footer> is the semantic landmark for the closing region. <bottom> is not a valid HTML element. Semantic elements have no built-in visual styling. Their value is meaning and accessibility - all appearance comes from CSS. <nav> can appear anywhere on the page. The placement depends on the page design - it can be inside <header>, standalone, or inside <aside>.

Common mistakes: HTML tag names must be lowercase. <HEADER> should be written as <header>. The header closing tag is missing its forward slash. It should be </header> not <header>.

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 Semantic layout landmarks (header, nav, main, footer) (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which semantic element wraps the site title and navigation at the top of a page?

Matches

<head><h1>Site Title</h1></head>

↓

<head> is for metadata, not visible content - use <header> for the visible page header

Applying

Meanings

Term

<main>

Meaning

The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.

Practice

<body>

Testing

Gaps

Check Answer

Spots

1<HEADER>

2 <h1>My Site</h1>

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 semantic element wraps the site title and navigation at the top of a page?

A. <header> ✓

B. <head>

<header> is the visible page header landmark. <head> is the document metadata element - they are completely different.

2. Which element contains the primary navigation links of a site?

A. <nav> ✓

B. <menu>

<nav> is the HTML5 semantic element for navigation. <menu> is not the standard choice for site navigation.

3. True or false: a page can have more than one <main> element.

A. False ✓

B. True

There should be exactly one <main> per page. It marks the unique primary content area.

4. Which element wraps copyright and contact information at the bottom of a page?

A. <footer> ✓

B. <bottom>

<footer> is the semantic landmark for the closing region. <bottom> is not a valid HTML element.

5. True or false: semantic landmarks add visible styling to the page automatically.

A. False ✓

B. True

Semantic elements have no built-in visual styling. Their value is meaning and accessibility - all appearance comes from CSS.

Match the Pairs

<header> <h1>My Site</h1> <nav>Links</nav> </header> → The page header landmark - wraps introductory content like the site title and navigation at the top

<main> contains the unique primary content - only one <main> per page is allowed → <main> <h2>Welcome</h2> <p>Page content here.</p> </main>

<nav> groups navigation links and tells assistive technology this is the site menu → <nav> <a href="home.html">Home</a> <a href="about.html">About</a> </nav>

<head><h1>Site Title</h1></head> → <head> is for metadata, not visible content - use <header> for the visible page header

<HEADER> <h1>Title</h1> </HEADER> → HTML tag names must be lowercase - <HEADER> and </HEADER> should be <header> and </header>

Key Term

<main>

The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.

Fill in the Blanks

1. <header> <h1>My Site</h1> <nav>Links</nav> </header>

Hint: Type the semantic element that wraps the page header region

2. <header> <nav> <a href="home.html">Home</a> </nav> </header>

Hint: Type the semantic element for site navigation links

3. <main> <h2>Welcome</h2> <p>Content here.</p> </main>

Hint: Type the semantic element for the page's primary content area

Hint: Type the semantic element that wraps the page footer region

5. <header> <h1>Title</h1> </header>

Hint: Type the element name for the closing tag of the page header region

Spot the Error

Question 1

A <HEADER>

B <h1>My Site</h1>

C <nav>Links</nav>

D </header>

Line A — HTML tag names must be lowercase. <HEADER> should be written as <header>.

Question 2

A <body>

B <header><header>

C <main><p>Content.</p></main>

D <footer>Info</footer>

E </body>

Line B — The header closing tag is missing its forward slash. It should be </header> not <header>.

Question 3

A <body>

B <header><h1>Site</h1></header>

C <NAV>Links</NAV>

D <main>Content.</main>

E <footer>Info</footer>

F </body>

Line C — HTML tag names must be lowercase. <NAV> and </NAV> should be written as <nav> and </nav>.

Question 4

A <header>

B <nav>

C <a href="home.html">Home</a>

D <a href=about.html>About</a>

E </nav>

F </header>

Line D — The href value must be in double quotes: href="about.html". href=about.html without quotes is invalid HTML.

Question 5

A <body>

B <header><h1>Title</h1></header>

C <nav><a href="home.html">Home</a></nav>

D <main><p>Content.</p></main>

E <Footer>Info</Footer>

Line E — HTML tag names must be lowercase. <Footer> and </Footer> should be written as <footer> and </footer>.

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?