Semantic HTML

Easy — everyone uses thisFrontend

ELI5 — The Vibe Check

Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs.

for navigation,

for articles,

<!-- Not semantic -->
<div class="nav">
  <div class="nav-item" onclick="...">Home</div>
</div>

<!-- Semantic -->
<nav aria-label="Main navigation">
  <a href="/">Home</a>
</nav>

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

When You'll Hear This

"Replace all those divs with semantic elements — use nav, main, article." / "Semantic HTML is step one of accessibility."

Related Terms

Accessibility (a11y)

Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision.

intermediateFrontend

DOM (Document Object Model)

The DOM is a live map of your webpage that JavaScript can read and edit. When the browser loads your HTML it turns it into a big tree of objects.

beginnerFrontend

HTML (HyperText Markup Language)

HTML is like the skeleton of a webpage. You write tags like <h1> and <p> and the browser builds the bones of your site from them.

beginnerFrontend

SEO

SEO is the art of convincing Google to rank your website higher than your competitors.

beginnerFrontend

Back to Browse Random Term