Semantic HTML

Semantic HTML uses elements that describe meaning, not just appearance. It helps accessibility, SEO, and your future self.

Why semantics matter

Screen readers and search engines use element meaning, not styling. A page built with <div>s everywhere tells them nothing.

<!-- bad -->
<div class="header"><div class="title">My Blog</div></div>

<!-- good -->
<header><h1>My Blog</h1></header>

Landmarks

Landmark elements define the page regions:

<header> — top of the page
<nav> — navigation links
<main> — the primary content (one per page)
<article> — a self-contained piece of content
<aside> — side content
<footer> — bottom of the page

<body>
  <header>Logo and tagline</header>
  <nav>Home · About · Contact</nav>
  <main>
    <article>
      <h1>Post title</h1>
      <p>Post content…</p>
    </article>
  </main>
  <footer>Copyright</footer>
</body>

Lists and text semantics

Use the right element for the job:

<ul> / <ol> / <li> — lists
<strong> — important text
<em> — emphasis
<time> — a date or time
<blockquote> — a quotation