Semantic HTML

header, nav, main, section, article and footer: tags that say what the content is.

Lesson 9 of 120% of the track complete

What you'll learn

How to replace anonymous <div> boxes with tags that describe their purpose.

Why it matters

Search engines and screen readers use these tags to understand the page. A screen reader user can jump straight to the <main> content or the <nav>, which is impossible if everything is a div.

Explanation

Semantic means "carrying meaning". A <div> says nothing about its content. These tags do:

<header>: introductory content, often the logo and title.
<nav>: a block of navigation links.
<main>: the main content of the page. Use it once.
<section>: a themed group of content, usually with a heading.
<article>: a self-contained piece, like a blog post or a news item.
<aside>: side content, such as a related-links box.
<footer>: closing content, such as copyright and contact links.
<figure> and <figcaption>: an image or diagram with a caption.

They look plain by default. Style them with CSS.

Example

Step-by-step walkthrough

<header> holds the site title and the <nav> links.
<main> wraps the unique content of the page.
Inside it, <article> is a self-contained post with its own heading.
<figure> pairs the image with a <figcaption> caption.
<aside> is content related to, but separate from, the article.
<footer> closes the page.

Try it yourself

Wrap a second post in another <article> inside <main>.

Semantic layoutHTML / CSS

Ctrl+Enter to run

Common mistakes

Using <div> for everything ("divitis").
More than one <main> on a page.
Using <section> as a generic box. If it has no heading, a div may be better.
Picking tags for how they look. Pick for meaning, then style with CSS.

Quick quiz

Question 1 of 3

Which tag holds the main content of a page?

Question 2 of 3

Which is best for a self-contained blog post?

Question 3 of 3

Why use semantic tags?

They are faster to downloadTools can understand the page structureThey remove the need for CSS

Summary

Semantic tags name the parts of a page: header, nav, main, article, aside, footer.
They help accessibility and search.
Use div only when nothing more meaningful fits.

Next: making pages work for everyone.

HTML

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Learning HTML</h2>
    <p>Semantic tags make pages easier to understand.</p>
    <figure>
      <img src="https://placehold.co/200x80/png?text=Diagram" alt="A simple diagram" width="200" height="80">
      <figcaption>Figure 1: a diagram</figcaption>
    </figure>
  </article>
  <aside>Related: CSS basics</aside>
</main>

<footer>Copyright 2025</footer>