HTMLLesson 9 of 10Jump to practice

Page structure with semantic elements

Use header, nav, main, article, section and footer so browsers, screen readers and search engines understand your page.

You could build a whole page out of <div> elements. It would look fine, but nothing in the code would say which part is the menu, which is the article and which is the footer.

Semantic elements are boxes with a meaning. They look the same as a <div> but tell the browser what each part of the page is.

Element Use it for
<header> The top of the page, or of an article: logo, title, intro
<nav> A block of navigation links, like the main menu
<main> The content unique to this page. One per page
<article> Something that makes sense on its own: a blog post, a news story, a product card
<section> A themed part of a page, usually with its own heading
<aside> Side content: related links, a tip, an ad
<footer> The bottom of the page or article: copyright, contact, links

A typical page

A page skeleton
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; margin: 0; }
  header, nav, main, aside, footer { padding: 10px 16px; }
  header { background: #123b3c; color: white; }
  nav { background: #e8f3f1; }
  nav a { margin-right: 12px; }
  aside { background: #fff7e0; }
  footer { background: #eee; font-size: 14px; }
</style>
</head>
<body>
<header>
  <strong>Chicago Food Blog</strong>
</header>
<nav>
  <a href="#">Home</a> <a href="#">Recipes</a> <a href="#">About</a>
</nav>
<main>
  <article>
    <h1>The perfect bowl of chili</h1>
    <p>Cold days call for a big pot of chili...</p>
    <section>
      <h2>Ingredients</h2>
      <p>Ground beef, beans, tomatoes, onion...</p>
    </section>
  </article>
  <aside>Tip: brown the meat first for more flavor.</aside>
</main>
<footer>Copyright 2026 Chicago Food Blog</footer>
</body>
</html>
Result

Why it matters

  • Accessibility. Screen readers list these areas as landmarks, so a blind visitor can jump straight to the menu or the main content.
  • Search engines understand which text is the real content and which is the menu or footer.
  • You. Six months from now, <nav> is far easier to read than <div class="top-thing">.

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Mark up the site's main menu.

    <>
  <a href="/">Home</a>
  <a href="/blog/">Blog</a>
  <a href="/contact/">Contact</a>
</>

  2. Exercise 2

    Wrap the content that is unique to this page.

    <header>My site</header>
<>
  <h1>Today's news</h1>
  <p>...</p>
</>
<footer>Copyright 2026</footer>

  3. Exercise 3

    This blog post makes sense on its own, even if shared elsewhere. Pick the right element.

    <>
  <h2>A weekend in Miami Beach</h2>
  <p>We arrived early on Friday...</p>
</>

Quiz: 3 questions

1. How many <main> elements should a page show?
2. Who benefits from semantic elements?
3. What usually goes in a page's <footer>?

Finish the practice to complete this lesson.

Sign in to keep your progress on any device.