DocHero
Lesson 12 +10 XP

Page Structure

Page Structure

A web page is like a well-organized house. HTML has special tags to name each room!

The sectioning tags

  • <header>: the top of a page or section (logo, title, maybe a menu).
  • <footer>: the bottom (copyright, contact links).
  • <nav>: a block of navigation links.
  • <main>: the main content of the page (only one!).
  • <section>: a themed chunk of content.
  • <article>: a self-contained piece, like a blog post or a news story.
  • <aside>: side content, like a sidebar or related links.
  • <address>: contact info for a person or page.
  • <search>: marks a search area.

A sample layout

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="home.html">Home</a>
      <a href="posts.html">Posts</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>My First Post</h2>
      <p>Today I learned about HTML!</p>
    </article>

    <aside>
      <h3>About me</h3>
      <p>I love building websites.</p>
    </aside>
  </main>

  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>

Which one do I pick?

Ask yourself:

  • Is it the top? → <header>
  • Is it the bottom? → <footer>
  • Is it the most important middle part? → <main>
  • Does it stand alone like a blog post? → <article>
  • Is it a themed group? → <section>
  • Is it extra, related stuff on the side? → <aside>
  • Is it a menu of links? → <nav>

The generic div

<div> is the "I have no special meaning" box. Use it to group things for styling, but prefer the named tags when you can: they tell everyone what the content means.

hgroup

<hgroup> groups a main heading with related sub-headings.

<hgroup>
  <h1>The Great Adventure</h1>
  <h2>Book One of Many</h2>
</hgroup>

Why semantics matter

When you use the right tag, you help:

  • Search engines understand your page.
  • Screen readers navigate it.
  • Other developers read your code.

Semantic HTML is like labeling boxes in your garage: everyone can find what they need!

TL;DR

  • <header> = top, <footer> = bottom.
  • <nav> = links, <main> = main content (once).
  • <section> = themed chunk, <article> = standalone piece.
  • <aside> = sidebar-ish extras, <address> = contact info.
  • <div> = generic box with no meaning.
  • Use the named tags: they tell everyone what things mean.