LESSON 91 OF 120

Build: a page with landmarks

Integrate header, nav, main and footer into a coherent document.

Official sourceWHATWG HTML — sectionsReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Integrate header, nav, main and footer into a coherent document. Semantic structure should describe meaning, not visual appearance.

Correct example
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Local workshop</title></head>
<body>
<header><h1>Local workshop</h1><nav><a href="#services">Services</a></nav></header>
<main id="services"><h2>Services</h2><p>Support for local projects.</p></main>
<footer><p>Contact: workshop@example.com</p></footer>
</body>
</html>

The header introduces the page, nav groups primary links, main contains the dominant content and footer holds closing information. One h1 names the page and one main identifies its primary region.

Common mistake
<header><h1>Workshop</h1></header><main><p>Services.</p></main>

The structure has a header and main, but DOCTYPE, nav and footer are missing, so the document does not provide every required region.

STEP 2 · APPLY

Your exercise

Complete the example. Integrate header, nav, main and footer into a coherent document.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The document declares HTML5.
  • Header, nav, main and footer exist.
  • The document has exactly one main.
  • The page has one h1.
Explain the solution logic

Add <!doctype html> first, then build the body in this order: header with nav, main and footer. Check that h1 and main each appear exactly once.