HTML — Semantic Elements

Overview

Semantic elements describe meaning (header, nav, main, article, footer).

What you'll learn

• Why semantic HTML matters
• Common semantic tags
• SEO & accessibility

Syntax

<main><article>...</article></main>

Example

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h1>Title</h1>
    <p>Content...</p>
  </article>
</main>

<footer>© 2026</footer>

Notes

• Semantics improve screen readers.
• Search engines understand structure better.

  Try: Open the Playground: /en/playground/html