Semantic HTML — HTML Fundamentals

ANALOGY

A book vs a pile of pages. A book has chapters, headings, sections, and an index. A pile of pages just has text. Semantic HTML is the difference between a well-organised book and a random pile — the same words, but one is structured and navigable.

The semantic layout elements

A semantically structured page

html

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>

  <header>
    <!-- Site logo and main navigation -->
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- The primary content of the page -->
    <article>
      <h1>Understanding Variables in JavaScript</h1>
      <p>Published on January 15, 2025</p>
      <p>Article content goes here...</p>

      <section>
        <h2>What is a variable?</h2>
        <p>A variable is a named container for data...</p>
      </section>

      <section>
        <h2>Let vs const vs var</h2>
        <p>Modern JavaScript uses let and const...</p>
      </section>
    </article>

    <aside>
      <!-- Related articles or supplementary content -->
      <h2>Related courses</h2>
      <ul>...</ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 NelsonLabs</p>
  </footer>

</body>
</html>

Why semantics matter

—Screen readers use semantic elements to navigate pages. A blind user can jump between <nav>, <main>, and <footer> with keyboard shortcuts.
—Search engines give more weight to content inside <main> and <article> elements. Semantic structure improves SEO.
—Maintainability — code that describes its own purpose is easier to understand and update six months later.
—Browser defaults — semantic elements come with sensible default styling, reducing the CSS you need to write.

Element	Purpose
<header>	Site header or section header
<nav>	Navigation links
<main>	Primary page content (one per page)
<article>	Self-contained content that makes sense standalone
<section>	Thematic grouping of related content
<aside>	Tangentially related content (sidebar)
<footer>	Footer of site or section
<figure>	Images, diagrams, code examples with captions
<figcaption>	Caption for a figure
<time>	Dates and times (use the datetime attribute)