Frontend is a free bonus on CodeMentor AI β the main product is Python. Register to save your progress and unlock all 299 Frontend lessons + 1,100+ 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