Semantic HTML

Problem

Screen readers can’t understand page structure when everything is a div. Users can’t navigate by landmarks or skip to main content. Buttons built from divs don’t work with keyboard navigation or assistive technology. Search engines and browser tools can’t parse semantic meaning from generic elements, hurting SEO and user experience.

Solution

Use HTML elements for their intended purpose rather than generic divs and spans. This provides meaning to assistive technology and improves SEO without requiring extra ARIA.

Example

This demonstrates using semantic HTML elements to provide meaningful structure that assistive technologies and search engines can understand, improving accessibility and SEO without requiring additional ARIA attributes.

<article>
  <!-- Header landmark provides structure -->
  <header>
    <h1>Article Title</h1>
    <!-- Machine-readable date format -->
    <time datetime="2025-01-01">January 1, 2025</time>
  </header>
  <!-- Main content area -->
  <main>
    <p>Article content...</p>
  </main>
  <!-- Footer provides context about author -->
  <footer>
    <p>Author: John Doe</p>
  </footer>
</article>

Benefits

• Provides structure and meaning to assistive technology automatically.
• Improves SEO by communicating content structure to search engines.
• Enables keyboard navigation and browser features to work correctly.
• Requires less ARIA attributes since semantic elements have built-in roles.

Tradeoffs

• Requires knowing which HTML element to use for each purpose.
• May conflict with styling needs if semantic elements have default styles.
• Can be limiting when custom behavior is needed.
• Needs careful consideration when HTML5 semantic elements aren’t widely understood.