Semantic elements · HTML

A page built only from <div>s can look perfect and still say nothing about itself. Semantic elements describe what each part of a page is, which helps screen readers, search engines and the next developer to open the file.

Div soup vs semantic HTML

HTML

<!-- what is any of this? -->
<div class="top">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="bottom">...</div>

HTML

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

Both can look identical. Only the second lets a screen reader user say "take me to the navigation" or "skip to the main content".

A complete page layout

HTML

<style>
  body { font-family: system-ui; margin: 0; }
  header, nav, main, aside, footer { padding: 10px 14px; }
  header { background: #efedff; }
  nav a { margin-right: 12px; }
  .columns { display: flex; gap: 12px; }
  main { flex: 3; }
  aside { flex: 1; background: #f6f6f8; }
  footer { background: #222; color: #ddd; }
</style>

<header>
  <h1>CodeMIRAI Blog</h1>
</header>
<nav aria-label="Main">
  <a href="#">Home</a> <a href="#">Courses</a> <a href="#">About</a>
</nav>
<div class="columns">
  <main>
    <article>
      <h2>Five tips for learning to code</h2>
      <p><time datetime="2026-03-14">14 March 2026</time></p>
      <section>
        <h3>1. Type the examples</h3>
        <p>Reading code is not the same as writing it.</p>
      </section>
      <section>
        <h3>2. Break things on purpose</h3>
        <p>Every error message teaches you something.</p>
      </section>
    </article>
  </main>
  <aside>
    <h2>Popular</h2>
    <p>Python loops</p>
  </aside>
</div>
<footer>
  <p>&copy; 2026 CodeMIRAI</p>
</footer>

Semantic elements say what each part is for, which helps screen readers, search engines and the next developer.

<div class="columns"> is fine here: it exists only to arrange the two columns side by side, and has no meaning of its own.

What each element means

Element	Use it for
`<header>`	introductory content: a logo and site title, or the top of an article
`<nav>`	a block of major navigation links
`<main>`	the page's main content, once per page
`<article>`	a self-contained piece that would make sense on its own: a post, a product, a comment
`<section>`	a themed group of content, usually with its own heading
`<aside>`	related but secondary content: a sidebar, a pull quote
`<footer>`	closing content: copyright, contact and related links
`<figure>` and `<figcaption>`	an image, chart or code sample with its caption
`<time datetime="...">`	a date or time in a form machines can read
`<address>`	contact details for the page's owner or an article's author

An accordion with no JavaScript

HTML

<style>body { font-family: system-ui; } details { margin: 8px 0; }</style>
<details>
  <summary>What does "semantic" mean?</summary>
  <p>Relating to meaning. Semantic HTML chooses elements for what the content <em>is</em>, not how it looks.</p>
</details>
<details open>
  <summary>Why is this one already open?</summary>
  <p>Because of the <code>open</code> attribute.</p>
</details>

<details> and <summary> give you a working, keyboard-accessible expander for free.

When to use div and span

<div> (a block) and <span> (inline) group content purely for styling or scripting, when no semantic element fits. They aren't wrong; they're the last resort rather than the first choice.