Web Developer Path · lesson 5 of 18

Semantic page layout

Structure a page with meaningful elements instead of anonymous boxes, so people, screen readers and search engines understand it.

What you will learn

what semantic means and why it helps accessibility and search engines
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
using one <h1> and headings in order

Understand the idea

A semantic element describes what its content is, not just how it looks. A plain <div> says nothing, but <nav> says "these are the main links" and <footer> says "this is the end matter". Semantic tags give a page landmarks. Screen reader users can jump straight to the main content or the navigation, and search engines understand which part of a page is the real content.

The usual page layout has these parts. <header> holds the page title or logo. <nav> holds the main navigation links. <main> holds the unique content of the page and should appear only once. Inside it, <section> groups related content under a heading, <article> is a self-contained piece such as a blog post or a news story that would make sense on its own, and <aside> holds side content such as related links. <footer> closes the page with copyright or contact details.

Headings follow the same order. Use one <h1> for the page title, <h2> for the sections, <h3> for parts of a section. Do not pick a heading because of its size, because CSS controls size. Pick it for its level in the outline.

Example

A semantic page

<body>
  <header>
    <h1>Maths Club</h1>
    <nav>
      <a href="#news">News</a>
      <a href="#events">Events</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>News</h2>
      <article>
        <h3>We won the quiz</h3>
        <p>Well done to everyone.</p>
      </article>
    </section>
    <aside>Next meeting: Friday</aside>
  </main>
  <footer>© Maths Club</footer>
</body>

Each element has one clear job. Swap them all for div and the page would look the same to your eyes but make no sense to a screen reader.

Your turn: code to type and practise

Build the layout: a header with an h1 and a nav holding two links, a main with a section that contains an article, an aside, and a footer with some text.

Stretch challenge

Add a second article and an h2 that introduces the section.

← Images, audio, video and embeds Forms and user input →

HTML

Keep going in Web Developer Path

How the web works and your first HTML page

Complete the page: give it the title `My page`, put an `h1` heading inside the body, add two lines of text separated by `<br>`, and add an HTML comment.

Start →2

Elements, attributes and text formatting

Write a paragraph with the id `notes` that contains important text (`strong`), emphasised text (`em`), highlighted text (`mark`) and a subscript (`sub`).

Start →3

Links, lists and tables

Build a timetable table with a heading row of three `th` cells (Day, Subject, Time) and at least two rows of three `td` cells. Then add an ordered list of three steps and a link to `#top`.

Start →4

Images, audio, video and embeds

Write a figure that contains an image (with `src` and `alt`) and a caption, then an `audio` player with `controls` and a `video` player with `controls`.

Start →6

Forms and user input

Build a sign-up form with labelled text, email and password fields, two radio buttons that share the name `level`, a checkbox, a `select` with two `option`s, a `textarea` and a submit button.

Start →

Practise the idea

🛡️ Play Knights and Knaves

Knights always tell the truth and knaves always lie. Read their words and work out who is who.

Play now

FAQ

Semantic page layout: common questions

What does semantic HTML mean?

Using elements whose names describe their purpose, such as nav, main and footer, instead of generic div boxes.

How many main elements can a page have?

One. The main element holds the unique content of the page.

Does semantic HTML help SEO?

It helps search engines understand the structure of your page, which supports good indexing, but it works together with good content and clear headings.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay