~/hackweb.dev
Semantic HTML
Quiz
...

Semantic HTML

beginner · updated Tue Sep 08 2026Contribute

Learn why meaningful elements matter for accessibility, SEO, and maintainability.

Semantic HTML

Semantic HTML uses elements that describe their meaning, not just their appearance. Instead of generic <div> tags, you use elements that tell browsers and screen readers what the content represents.

Why Semantics Matter

Accessibility:

  • Screen readers understand page structure
  • Users can navigate by landmarks
  • Content makes sense without CSS

SEO:

  • Search engines understand content hierarchy
  • Better ranking for important content
  • Rich snippets in search results

Maintainability:

  • Code is easier to read and understand
  • Clear structure for other developers
  • Less reliance on CSS classes for meaning

Non-Semantic vs Semantic

<!-- Non-semantic (bad) -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="content">
  <div class="article">
    <div class="title">My Article</div>
  </div>
</div>
<div class="footer"></div>

<!-- Semantic (good) -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>My Article</h1>
  </article>
</main>
<footer></footer>

Page Structure Elements

Represents introductory content or navigation:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

Can be used for:

  • Page header
  • Article header
  • Section header

Contains navigation links:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Use for:

  • Main navigation
  • Table of contents
  • Breadcrumbs

<main>

The primary content of the page (only one per page):

<main>
  <h1>Welcome to My Site</h1>
  <p>This is the main content.</p>
</main>

<article>

Self-contained content that could be distributed independently:

<article>
  <h2>How to Learn HTML</h2>
  <p>Published: <time datetime="2026-09-01">September 1, 2026</time></p>
  <p>HTML is the foundation of web development...</p>
</article>

Use for:

  • Blog posts
  • News articles
  • Forum posts
  • Product cards

<section>

Groups related content with a heading:

<section>
  <h2>Our Services</h2>
  <p>We offer web development, design, and consulting.</p>
</section>

<aside>

Content tangentially related to the main content:

<main>
  <article>
    <h1>Main Article</h1>
    <p>Content here...</p>
  </article>

  <aside>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/other">Other Article</a></li>
    </ul>
  </aside>
</main>

Use for:

  • Sidebars
  • Pull quotes
  • Advertising
  • Related links

Footer for a page or section:

<footer>
  <p>&copy; 2026 My Website</p>
  <nav>
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Content-Specific Elements

<figure> and <figcaption>

For images, diagrams, or code with captions:

<figure>
  <img src="chart.png" alt="Sales chart" />
  <figcaption>Figure 1: Quarterly sales growth</figcaption>
</figure>

<time>

Represents a specific date or time:

<p>Published on <time datetime="2026-09-01">September 1, 2026</time></p>
<p>Event starts at <time datetime="14:00">2:00 PM</time></p>

<mark>

Represents text that has been highlighted for reference or annotation purposes (like search results):

<!-- Search results highlighting -->
<p>
  Search results for "HTML semantics":<br />
  Learn how to write <mark>semantic HTML</mark> to improve accessibility.
</p>

<!-- Highlighting important passages -->
<article>
  <p>
    The <mark>key principle</mark> of semantic HTML is using elements
    that describe their meaning, not their appearance.
  </p>
</article>

<details> and <summary>

Interactive disclosure widget:

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default.</p>
</details>

Complete Example

Here’s a complete semantic page structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
      <nav aria-label="Main">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <header>
          <h1>Learning Semantic HTML</h1>
          <p>
            Published on
            <time datetime="2026-09-08">September 8, 2026</time>
          </p>
        </header>

        <section>
          <h2>Why Semantics Matter</h2>
          <p>Semantic HTML improves accessibility and SEO...</p>
        </section>

        <section>
          <h2>Key Elements</h2>
          <p>Use header, nav, main, article, section, and footer...</p>
        </section>

        <footer>
          <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/seo">SEO</a></p>
        </footer>
      </article>

      <aside>
        <h2>Related Posts</h2>
        <ul>
          <li><a href="/css-basics">CSS Basics</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 My Blog. All rights reserved.</p>
    </footer>
  </body>
</html>

Common Mistakes

  1. Using div for everything — Div has no semantic meaning
  2. Missing headings — Every section should have a heading
  3. Using header for footer — Use footer for bottom content
  4. Overusing aside — Only for tangentially related content
  5. Missing main element — Every page should have one main