Frontend is a free bonus on CodeMentor AI — the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up — free
TaskWrap the page in three top-level tags: <header> containing <h1>My Blog</h1>, <main> containing <article><p>Post body</p></article>, and <footer> containing <p>© 2026</p>.
<main>, <header>, <footer>: page-level landmarks
75 XP7 minFREE
Theory
Three tags every page should have exactly once
<body> <header>…</header> <main>…</main> <footer>…</footer> </body>
- `<header>` at the top level of body is the "banner" landmark — your site logo, primary nav, search. (Inside an
<article>,<header>means *that article's* header instead — same tag, scoped meaning.) - `<main>` is the "main" landmark — the one piece of content this page is actually about. Exactly one per page. Screen-reader users get a keyboard shortcut to jump straight here.
- `<footer>` at the top level of body is the "contentinfo" landmark — copyright, secondary nav, legal links.
Common mistake: nesting them wrong
<!-- WRONG — sidebar isn't part of the main content --> <main> <article>…</article> <aside class="sidebar">…</aside> </main> <!-- BETTER — aside is a sibling of main --> <main> <article>…</article> </main> <aside>…</aside>
<main> should contain ONLY the primary content. Sidebars, related links, ads — siblings, not children.
Why one main per page
Lighthouse, axe, and every other a11y audit will flag multiple <main> tags. Screen readers may pick one and ignore the others, or get confused entirely. Pick the *primary* content area.
Live preview