Unit 2 · HTML: structure and meaning
The <header> element vs a heading
<header> is the introductory bar of a page or a section, usually the site name and links. A story’s headline belongs to the story, so it goes inside <main>, in the <article>.
The mix-up
What people often think
“Anything that looks like a heading belongs in <header>.”
What the tutor says
<header> is the page's own top bar. The story's headline is part of the story, so it goes in main, inside the article.
How it works
Semantic elements describe what content is, not where it sits or how it looks. <nav> holds the main menu, <main> holds the content the page exists for, <article> wraps one self-contained piece, and <footer> holds the fine print.
A list of links is not automatically footer material: the main menu is navigation. And the page’s h1 says what this page is about, so it usually opens <main> rather than sitting in the site header.
An example
<header>
<a href="/">Corner Bakery</a>
<nav>...</nav>
</header>
<main>
<article>
<h1>New: rye sourdough</h1>
<p>...</p>
</article>
</main>
<footer>Corner Bakery · 12 Main St</footer>Close cousins of this mix-up
The tutor watches for these in the same lesson.
“Lists of links go in the footer.”
The main menu is navigation, so it goes in <nav>. The footer holds the fine print.
“The page heading goes in the header because it is at the top.”
The header holds the site name and links. The h1 says what this page is about, so it opens main.
Practise it with a tutor watching
Elements that mean something
Pick header, nav, main, article and footer for what content is, not how it looks.
Free with an account. The first two units need no account.