Introduction to Semantic HTML

Semantic HTML means using the right HTML element for the right purpose. Elements like <article>, <section>, and <nav> describe the meaning of the content, not just how it looks. This contrasts with non-semantic elements like <div> and <span>, which carry no inherent meaning.

Why Semantics Matter

Semantic elements benefit three audiences. Search engines use semantic structure to understand content hierarchy and topic relevance. Accessibility tools like screen readers use landmarks (<main>, <nav>, etc.) to let users jump directly to key sections. Developers benefit from self-documenting code that is easier to read and maintain without relying on comment annotations.

Better SEO through meaningful structure
Improved accessibility for screen readers
Cleaner, self-documenting code
Easier CSS targeting with element selectors

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML</title>
</head>
<body>
  <!-- Non-semantic approach (avoid) -->
  <div id="header">
    <div id="nav">...</div>
  </div>
  <div id="main">
    <div class="article">...</div>
    <div class="sidebar">...</div>
  </div>
  <div id="footer">...</div>

  <!-- Semantic approach (preferred) -->
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>...</article>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>
</html>

HTML

Full Editor

Pro Tip

Start every new project by laying out the page skeleton with semantic elements first — <header>, <nav>, <main>, <aside>, <footer> — before adding any <div> containers for purely layout purposes.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned