HTML Semantic Elements: header, nav, main, article, section

You can build an entire web page out of <div> elements. It will look fine in the browser. But to a screen reader, a search engine or another developer, it is just a pile of boxes with no meaning. Semantic elements fix that: they tell everyone what each part of the page is, not just how it looks.

What you will learn

• What “semantic” means and why it matters
• The page-level elements: header, nav, main, footer
• The content elements: article, section, aside, figure, time, address
• How to choose between article, section and div
• Why heading order and button vs a are semantic choices too

What does semantic mean?

A semantic element has a name that describes its purpose. <nav> means “navigation links”. <footer> means “closing information”. A <div> means nothing at all: it is only a generic box.

<!-- Works, but says nothing about its purpose -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Same layout, but now the page explains itself -->
<header>
  <nav>...</nav>
</header>

The visual result is identical. The difference is what happens behind the scenes:

• Screen readers let people jump straight to the navigation, the main content or the footer.
• Search engines understand which part of the page is the real content and which is repeated menus.
• Developers (including you, six months from now) can read the structure at a glance.
• Browsers give you features for free, such as reader mode.

You get all of this without writing any extra attributes.

The page skeleton

Most pages follow the same shape:

<body>
  <header>
    <nav>Site navigation</nav>
  </header>

  <main>
    <article>
      <h1>Page title</h1>
      <section>
        <h2>A section of the article</h2>
      </section>
    </article>

    <aside>Related links</aside>
  </main>

  <footer>Copyright and secondary links</footer>
</body>

Let us go through each piece.

<header>

Introductory content: usually a logo, the site title and the main navigation. A page can have a <header> for the whole site, and each <article> can also have its own header with its title and author.

<nav>

A block of major navigation links: the main menu, a table of contents, or pagination. Not every group of links needs a <nav>. A few links in a paragraph are just links. If a page has more than one <nav>, label each one:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer links">...</nav>

<main>

The unique content of this page. Use it once per page, and do not put the site header, footer or sidebar menus inside it. Keyboard and screen reader users can jump directly to it, so it is the “skip the menu” target.

<footer>

Closing information: copyright, contact links, legal pages. Like <header>, an <article> can have its own footer, for example with the author and tags.

Content elements

<article>

A self-contained piece that would still make sense if you copied it to another website: a blog post, a news story, a product card, a user comment.

<section>

A thematic group of content, normally with its own heading. Think of the chapters of a document.

<aside>

Content that is related but not essential: a sidebar, a pull quote, a “related articles” box.

<figure> and <figcaption>

A figure is self-contained media (an image, a diagram, a code sample) with an optional caption:

<figure>
  <img src="v60.jpg" alt="A V60 dripper above a glass jug" width="600" height="400" />
  <figcaption>The V60 dripper mid-pour.</figcaption>
</figure>

<time>

Marks a date or time in a way a machine can read, while people see friendly text:

<time datetime="2026-09-18">18 September 2026</time>

<address>

Contact information for the nearest <article> or for the whole page. It is not for any postal address you happen to mention.

<address>
  Written by <a href="mailto:hello@example.com">the editor</a>
</address>

article or section or div?

This is where most beginners get stuck. Ask these questions in order:

1. Could this stand alone, for example in an RSS feed or a share card? Use <article>.
2. Is it a themed part of something bigger, and does it have a natural heading? Use <section>.
3. Is it only a wrapper for styling or layout? Use <div>.

A <section> without a heading is usually a sign that a <div> was the right choice. And <div> is not bad: it is simply the correct tool when there is no meaning to express.

Headings are semantic too

Screen reader users often move through a page by jumping from heading to heading, the way sighted users scan the big text. So headings should form a clean outline:

<h1>Coffee Journal</h1>
  <h2>How to brew a better V60</h2>
    <h3>What you need</h3>
    <h3>Steps</h3>
  <h2>Choosing a grinder</h2>

Rules of thumb:

• One <h1> per page, describing the page itself.
• Do not skip levels (<h1> straight to <h4>).
• Never choose a heading level because of its size. Use CSS for size.

Buttons and links

One more semantic choice you make every day:

<!-- Goes somewhere -->
<a href="/recipes/">See all recipes</a>

<!-- Does something on this page -->
<button type="button">Copy recipe</button>

A <div onclick="..."> pretending to be a button has no keyboard support, no focus ring and no meaning to assistive technology. Use the real element.

Common mistakes

• Using <section> as a styling wrapper. Use <div> when there is no heading and no theme.
• More than one <main>. There must be exactly one visible <main> per page.
• Putting the site header or footer inside <main>. Those belong outside it.
• Wrapping every group of links in <nav>. Reserve it for major navigation.
• Choosing elements by how they look. <blockquote> for indentation or <h3> for small text are classic traps. Style with CSS.

Practice

Open the editor and try these:

1. In the practice page, wrap the “Related” aside inside the <article>. Does the meaning still make sense? Why might it be better outside?
2. Add a second <nav aria-label="Footer links"> inside the footer with two links.
3. Rewrite the page using only <div> elements, then compare the two versions. What information is lost?
4. Add an <address> with an email link to the end of the article.

Recap

• Semantic elements describe meaning, <div> and <span> describe nothing.
• The page skeleton is header, nav, main and footer, with exactly one main.
• Use article for self-contained content, section for themed groups with a heading, and div for pure layout.
• Keep a clean heading outline and use button for actions and a for navigation.
• Next you will learn how the <head> and meta tags help browsers and search engines understand the whole page.