▶ TrainingGet Pro
Menu
All tools & lessonsAll toolsAllGet the appApp
Learning departments Music, Maths, Cookery, Programming and Art are open – explore →

HTML and CSS lesson 18: Header, nav, main and footer

UK version. UK school years and UK spelling. · US version of this lesson

Most pages share one layout: <header> (top, with the <nav> menu), <main> (the content) and <footer> (bottom). These elements tell everyone what each part is for. A complete 40-minute HTML and CSS lesson for beginners (Year 7, KS3), from Unit 6: Good pages for everyone. You build real web pages right here in your browser – nothing to install.

Time
40 minutes + 20 min homework
Year
Year 7, KS3 (ages 11–12)
You need
A computer or tablet, paper and a pencil
Marked
Instantly, with explanations

For parents: how to use this lesson

You don't need to know HTML yourself. The lesson explains each step on screen, the way Mr Babbage, our Head of Computing, likes it: a worked example first, then a go for your child. When your child builds a page, the browser draws it straight away and Classfern marks it with a checklist.

  1. Read what your child will learn together.
  2. Press Start the lesson below. Sit with your child for the teaching and the worked example (about 15 minutes): ask them to point at each tag and say what it does.
  3. Let them do the practice on their own. If a page doesn't look right, the checklist says what is missing – let them find the mistake before you help.
  4. Finish with the exit questions and the talk question: “Find the header, nav, main and footer on your favourite website.”
  5. Later that day or the next day: the homework (20 minutes), then a practice test.

Watch out for

  • A <div> is just as good as <nav>. They look the same, but <nav> tells screen readers it is the menu.
  • The footer can go inside <main>. It comes after <main>.

Miss Lovelace's tip for home: ask your child to change one thing on their page – a word, a colour, a size – and predict what will happen before they look. Predicting first is how programmers learn fastest.

What your child will learn

We are learning to build a page with header, nav, main and footer.

Success looks like

  • I can build a page with header, nav, main and footer.
  • I can explain why these elements beat plain <div>s.
  • I can style the layout with flexbox.

Key words

header · nav · main · footer · semantic HTML · layout

What to have ready

  • A device with a web browser (pages are built and checked right in the browser – nothing to install)
  • Paper for planning and sketching
  • A keyboard helps for typing code (a tablet works too)

The big ideas (for the adult)

Look at almost any website: a header across the top with the name and a menu, the main content in the middle, and a footer at the bottom. HTML has an element for each part: <header>, <nav> (the menu of links), <main> (one per page) and <footer>.

They look exactly like <div>s until you style them – their power is meaning. Screen readers can jump straight to the <nav> or <main>, and search engines know which part is the real content. Using the element that says what something IS is called semantic HTML.

Put them together with what you know: nav { display: flex; gap: 16px; } for the menu, padding and borders for spacing, and text-align: center; for the footer.

Worked example: page layout

CSS:

nav { display: flex; gap: 16px; }
footer { text-align: center; }

HTML:

<header>
<h1>Robot Club</h1>
<nav>
<a href="news.html">News</a>
<a href="team.html">Team</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>We build robots on Thursdays.</p>
</main>
<footer>
<p>Made by the Robot Club</p>
</footer>

The lesson, step by step

40 minutes in 5 parts
PartTimeHow it is checked
Starter5 minMarked by Classfern
Learn8 minRead, watch and talk
See it7 minRead, watch and talk
Practise15 minMarked by Classfern
Check and reflect5 minMarked by Classfern + self-check

The lesson

It runs here on the page. No sign-up and no names – nothing you type is sent anywhere. Each visit picks a new mix of questions.

Homework

20 minutes: predict what the browser will do, build or fix a short page, and check the key ideas – then a short reflection. New questions every time, all marked instantly.

Practice tests

All KS3 computing practice tests · All 20 HTML and CSS lessons

Curriculum

National curriculum in England, computing, key stage 3: pupils should be taught to use 2 or more programming languages, at least one of which is textual, to solve a variety of computational problems; make appropriate use of data structures [for example, lists, tables or arrays]; design and develop modular programs that use procedures or functions; and to create, reuse, revise and repurpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.

Contains public sector information licensed under the Open Government Licence v3.0.

Our lessons and questions are our own. They are not written or endorsed by any government department, testing agency or exam board. HTML and CSS are open web standards; Classfern is not affiliated with the organisations that publish them.