html · level 1 · unit 6 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<header>, <main> and <footer> mark out a page.
A <div> says nothing about what it holds. A is a box with meaning. Like signs in a shopping centre, landmarks tell browsers and screen readers what each area is for.
<header> holds the top of the page, such as the site's name. <main> holds the main content, and a page has only one. <footer> holds the bottom, like who made it.
Landmarks do not change the look. But screen reader users can jump straight to one, so they skip what they do not need.
<header>
<h1>Sam's Kitchen</h1>
</header>
<main>
<p>Today: tomato soup.</p>
</main>
<footer>
<p>Made by Sam</p>
</footer>Press show my page to see it here.
The <header> landmark is not the same as <head>, which holds facts about the page.
guess first
Landmarks added. What changes on the page?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<header>
<h1>Fun facts</h1>
</header>
<main>
<p>Snails can sleep for three years.</p>
</main>
<footer>
<p>Made with love</p>
</footer>your turn
Your turn. Mark out a club page.
Fill each pair of blanks with the right landmark: one for the top, one for the main content and one for the bottom.
Press show my page to see it here.
- the club's name is in the headernot checked yet
- the main part holds the newsnot checked yet
- the footer says who runs itnot checked yet
fix it
The site's name is at the bottom. Can you fix it?
Press show my page to see it here.
- the site's name is in the headernot checked yet
- the footer says who made itnot checked yet
- The big name sits at the very bottom of the page. Is that where it belongs?
- The header is for the top of the page, like the site's name. The footer is for small print.
- Swap the lines inside
<header>and<footer>, then press run.
nailed it
your page has signposts now. :D
- Landmarks say what each part of a page is for.
- A page has one
<main>for its main content. <header>goes at the top,<footer>at the bottom.
new words in your collection
- landmark
This lesson isn’t saved. A free account remembers every lesson you finish.