HTML5 Elements: header, nav, main, footer Explained

Last lesson left you with a list of divs that probably deserve more meaningful tags. Now we actually introduce those tags: the HTML5 semantic elements. These were added specifically to solve the div soup problem, giving common page regions real, built-in names that browsers, screen readers, and search engines all understand automatically.

The main structural tags you'll use on nearly every page are <header>, <nav>, <main>, <section>, <article>, and <footer>. Let's go through each with its actual purpose, not just its name.

Header And Navigation

<header> represents introductory content for a page or for a section, often a logo, a site title, or a set of headings. It is not strictly limited to the very top of the page; you can use it inside an <article> too, for that article's own heading area. Here's a typical page-level header:

<header>
  <h1>Stark Industries Blog</h1>
  <p>Updates from Tony Stark's workshop</p>
</header>

<nav> wraps your primary navigation links, the ones a visitor uses to move between major sections or pages of your site. Remember the loose links from the links lesson earlier in this course? This is exactly the tag they were missing:

<nav>
  <a href="index.html">Home</a>
  <a href="suits.html">Suits</a>
  <a href="contact.html">Contact</a>
</nav>

Not every group of links needs <nav>, by the way. A handful of related links inside an article's footer, like "related reading," don't need to be wrapped in <nav>; reserve it for genuinely significant, page-level or section-level navigation menus.

Main Content Area

<main> wraps the primary content of the page, the actual reason a visitor came, excluding repeated boilerplate like headers, navigation, and footers. There should be exactly one <main> per page.

<main>
  <h2>Latest Suit Updates</h2>
  <p>The Mark 50 now features full nanotech assembly.</p>
</main>

Section Versus Article

<section> groups a thematically related chunk of content, usually with its own heading. Think of it as a meaningful alternative to a div specifically when the content forms a distinct, named topic area within the page.

<section>
  <h2>Workshop Tools</h2>
  <p>A look at the equipment used to build each suit.</p>
</section>

<article> represents a piece of content that could stand alone and make sense if pulled out and placed somewhere else entirely, like a blog post, a news story, or a product card. The key test: would this content still make sense on its own, syndicated elsewhere, without the rest of the page around it?

<article>
  <h2>Why the Mark 50 Changed Everything</h2>
  <p>Nanotech assembly meant the suit could travel compacted into a small housing.</p>
</article>

The difference between <section> and <article> trips up a lot of beginners. A simple test: a single blog post is an <article>. A page listing three separate blog post summaries might wrap each summary in its own <article>, since each could stand alone, while the page listing them all together might sit inside a <section> titled "Recent Posts."

<footer> represents closing content for a page or section, commonly copyright notices, contact information, or secondary links.

<footer>
  <p>&copy; 2026 Stark Industries. All rights reserved.</p>
</footer>

Putting It All Together

Now let's assemble these into one realistic page skeleton, replacing the kind of div soup from the previous lesson:

<body>
  <header>
    <h1>Stark Industries Blog</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="suits.html">Suits</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>Why the Mark 50 Changed Everything</h2>
      <p>Nanotech assembly meant the suit could travel compacted into a small housing.</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2026 Stark Industries.</p>
  </footer>
</body>

Notice this reads almost like an outline even before any styling exists: header, navigation, main content with one article, footer. That readability is the entire point.

Common Mistakes To Avoid

A common beginner mistake is using <section> purely as a generic wrapper, the same way they previously overused <div>, without any real thematic grouping or heading behind it. If a chunk of markup doesn't represent a distinct, nameable topic, it's still fine to use a plain <div>; semantic tags aren't meant to replace every single div, only the ones that actually represent one of these specific structural roles.

These tags don't look any different visually by default; browsers apply almost no special styling to most of them beyond display: block, so the dramatic improvement is invisible until you consider screen readers and code readability, not a visual before-and-after.

A quick exercise: take the div-heavy page from the end of the previous lesson and rebuild it using <header>, <nav>, <main>, and <footer> in place of the generic divs you flagged. Read the resulting code top to bottom without any styling and notice how much more understandable the structure is just from the tag names alone.