Semantic HTML

Semantic HTML uses HTML5 tags that describe the meaning of the content they contain. Instead of <div class='header'>, use <header>. Instead of <div class='nav'>, use <nav>. Instead of <div class='article'>, use <article>. The browser, screen readers, search engines, and AI models all understand the meaning through the tag.

Key semantic tags: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>, <address>, <details>, <summary>, <mark>. Each has a specific meaning that search engines and accessibility tools rely on. <article> tells Google 'this is an article'; <nav> tells screen readers 'this is navigation'; <time datetime='2026-05-11'> tells everything 'this is a date the user can act on'.

Why it matters for SEO: search engines use semantic HTML to understand page structure, identify the main content vs sidebar navigation, extract publication dates, and qualify pages for rich results. A page with proper <article> and <time> tags is more likely to qualify for Article rich results than a page made entirely of divs.

Why it matters for accessibility: screen readers navigate by semantic landmarks. A visually-impaired user can jump directly to <nav> for navigation, <main> for content, <footer> for site info. A page made entirely of divs forces them to read everything linearly. WCAG (the accessibility standard) requires semantic landmarks for AA compliance.

Common mistakes: over-using divs (the 'div soup' anti-pattern), wrapping every section in <section> regardless of meaning, missing landmark tags entirely (no <header>, no <main>, no <footer>), and using <h1>–<h6> out of order (multiple <h1>s, jumping from <h2> to <h5>). Modern AI builders generate semantic HTML by default, but the output still needs review.