Guide

Semantic Elements

Using meaningful tags like header, nav, main, and footer to describe content

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

See Also

html-document-structure html-elements-and-tags html-accessibility-basics