HTML Semantic Elements

Overview

Semantic elements describe the meaning of their content rather than just its appearance. Tags like <header>, <nav>, <main>, <article>, and <footer> make pages easier to read, better for SEO, and far more accessible than a page built entirely from <div> elements. They give structure that both humans and machines understand.

Syntax / Usage

Choose the element that matches the role of the content. Reserve <div> and <span> for cases where no semantic element fits.

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/posts">Posts</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>My First Post</h2>
      <p>Welcome to my blog.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 My Blog</p>
  </footer>
</body>

Examples

A sidebar of related content using <aside>:

<main>
  <article>
    <h2>Understanding CSS Grid</h2>
    <p>Grid lays out content in rows and columns.</p>
  </article>
  <aside>
    <h3>Related</h3>
    <a href="/flexbox">Flexbox guide</a>
  </aside>
</main>

Grouping a section with a heading:

<section>
  <h2>Frequently Asked Questions</h2>
  <p>Answers to common questions.</p>
</section>

Common Mistakes

Wrapping everything in <div> when a semantic element exists
Using multiple <main> elements; there should be only one per page
Choosing tags for their default styling rather than their meaning
Nesting <header> or <footer> incorrectly, e.g. a footer inside a nav
Skipping heading levels (<h1> then <h4>), which confuses document outline

Overview

Syntax / Usage

Examples

Common Mistakes

See Also