HTML Semantics: Structure with Meaning

Learn how to build accessible, logical documents that speak the web's native language.

Progress

Semantic Tags

<header>
<nav>
<main>
<article>
<aside>

Why Semantics Matter

Accessibility

Screen readers and other assistive technologies rely on semantic structure to navigate and interpret content.

SEO

Semantic markup helps search engines understand your content's structure and context.

Maintainability

Clear structural tags make your code easier to read, debug and maintain over time.

Non-Semantic

Semantic

<div class="nav">
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>

vs.

<nav>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>