Lesson 6 of 8

Semantic HTML

Semantic means choosing elements that describe their content, such as <nav>, <main> and <article>, instead of using <div> for everything. It makes pages easier to navigate with assistive technology and easier to maintain.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Example</title>
</head>
<body>

  <!-- Site header with navigation -->
  <header>
    <h1>My Blog</h1>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content area -->
  <main>

    <!-- A self-contained article (could be shared independently) -->
    <article>
      <header>
        <h2>Learning Rust in 2024</h2>
        <p>By <address><a href="/author/alice">Alice</a></address>
           on <time datetime="2024-01-15">January 15, 2024</time></p>
      </header>

      <p>Rust's ownership model is unlike anything in most languages...</p>

      <!-- A section within the article -->
      <section>
        <h3>The Borrow Checker</h3>
        <p>At first, the borrow checker feels like an obstacle...</p>
      </section>

      <footer>
        <p>Tags: <a href="/tags/rust">Rust</a>, <a href="/tags/systems">Systems</a></p>
      </footer>
    </article>

  </main>

  <!-- Sidebar content related to, but not part of, main content -->
  <aside>
    <h2>Related Posts</h2>
    <ul>
      <li><a href="/post/2">Learning Go</a></li>
      <li><a href="/post/3">C vs C++</a></li>
    </ul>
  </aside>

  <!-- Site footer -->
  <footer>
    <p>&copy; 2024 My Blog. All rights reserved.</p>
  </footer>

</body>
</html>
Sandboxed page

Common question

Does it matter which HTML tag I use if it looks the same?

HTML describes what content is: a heading, a paragraph, a , a navigation area, a button, a form field with its label. Browsers, assistive technology and other software read that description. then decides how it looks, and it can make any element look like any other, which is exactly why the underlying meaning has to be right.

Pick the element that names the content: header, nav, main, article, section, aside and footer for page regions; h1 to h6 in order for structure; button for actions and a for links; a label tied to every input. Use div and span only when no meaningful element fits.

Source: The HTML specification defines each element by what it means, not how it looks. Appearance is CSS's job.

Common mix-ups

Each of these sounds reasonable. Think about why it is wrong, then open the explanation.

  • A div with a "heading" looks identical to an h1, so the choice is cosmetic.

  • A clickable div with an onclick handler is as good as a button.

  • Semantic tags only matter for accessibility, which is a niche concern.

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.