Lesson 19 / 30

Semantic Elements

Use header, nav, main, article, section and footer instead of generic divs to describe page structure.

Meaning over div soup

A page built entirely of <div> tags works visually but says nothing about structure — semantic tags fix that.

The common set

<header>, <nav>, <main>, <article>, <section>, <footer> each describe a real role on the page.

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <section>...</section>
  </article>
</main>
<footer>...</footer>

Labeled boxes

A <div> is a plain unmarked box; <nav> or <article> is the same box with a label on it — anyone (or any screen reader) instantly knows what's inside.