Semantic Structural Elements

Use semantic HTML elements to describe page structure — better for screen readers, search engines, and future developers.

4 min read Level 1/5 #html#semantic#structure

What you'll learn

Pick the right structural element
Build a sensible page skeleton
Recognize when `<div>` is the right choice

HTML has elements that describe what a region of the page is. A <nav> is more meaningful than <div class="nav"> — to screen readers, search engines, and other developers reading the code.

The Big Six

Element	Meaning
`<header>`	Introductory content for the page or a section
`<nav>`	Major navigation
`<main>`	The dominant content of the page (one per page)
`<article>`	A standalone piece of content (blog post, comment)
`<section>`	A thematic grouping with its own heading
`<aside>`	Tangential content (sidebar, callout)
`<footer>`	Closing content for the page or a section

A Sensible Page Skeleton

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Post Title</h2>
        <p>Published <time datetime="2026-05-12">May 12, 2026</time></p>
      </header>
      <p>Post body...</p>
      <footer>Tags: <a href="/tag/web">web</a></footer>
    </article>
  </main>

  <aside>
    <h2>Recent posts</h2>
    <ul>...</ul>
  </aside>

  <footer>
    <p>© 2026 Me</p>
  </footer>
</body>

When To Use Which

<header> — anything that introduces content. A page can have one for the whole site AND one per article. Don’t confuse with <head>.
<nav> — only for major navigation. A list of “related links” isn’t necessarily a <nav>.
<main> — the unique main content. One per page. Skip-links point here.
<article> — content that could stand alone. Blog post, news story, forum comment, product card.
<section> — a chunk of content with a heading. If it doesn’t have a heading, it’s probably a <div>.
<aside> — sidebars, related links, footnotes.
<footer> — closing content. Same as <header> — can be per-section, not just page-wide.

`<div>` Is Still Fine

When no semantic element fits, <div> is correct. Don’t shoehorn a semantic tag where there’s no actual meaning. <div> is a generic container, and that’s a useful thing.

Same for <span> — generic inline container.

Why It Matters

Screen readers can offer “skip to main” — only if <main> exists
Reader-mode browsers strip nav and aside, keep article
Search engines weight semantic content
Future-you reading the HTML in six months

Up Next

The <head> tags worth setting on every page.

Head Meta Tags →