Semantic HTML

Semantic HTML means the markup itself communicates intent. It provides structure before CSS and JavaScript are applied.

Why semantic HTML matters

Semantic elements improve keyboard navigation, search indexing, and screen reader interpretation. They also reduce the need for ARIA patches later.

How semantic HTML works

Use elements by purpose:

• <button> for actions
• <a> for navigation
• <main>, <nav>, <aside>, and <footer> for page regions
• heading levels for document outline

Avoid replacing semantic elements with generic <div> and <span> unless there is a strong reason.

Code examples

<!-- Div soup -->

<div class="nav"><div class="item">Pricing</div></div>

<!-- Semantic equivalent -->

<nav aria-label="Primary">
  <a href="/pricing">Pricing</a>
</nav>

<main>
  <h1>Release Notes</h1>
  <article>...</article>
</main>