This is an example blog post written by AI. Don’t read into it too deeply :)

The Case for Semantic HTML in Modern Web Development

While frameworks and component libraries dominate modern development, semantic HTML remains foundational to accessible, maintainable, and SEO-friendly websites. Understanding and using proper HTML elements is a core skill that pays dividends throughout a project’s lifecycle.

What Is Semantic HTML?

Semantic HTML uses elements that clearly describe their meaning and purpose, both to developers and browsers. Rather than relying solely on <div> and <span>, semantic markup employs elements like <article>, <nav>, <header>, and <aside> that convey structural meaning.

Compare these examples:

<!-- Non-semantic -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>

<!-- Semantic -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

The semantic version communicates purpose through element choice, not just class names.

Accessibility Benefits

Semantic HTML is crucial for accessibility:

Screen readers understand structure: Assistive technologies use semantic elements to navigate pages. A screen reader can jump between <nav> elements, skip to <main> content, or list all <article> elements. With only <div> tags, this navigation becomes impossible.

Keyboard navigation works correctly: Proper use of <button>, <a>, and form elements ensures keyboard users can interact with pages. <div onclick=""> requires extra JavaScript and ARIA to achieve what <button> provides by default.

ARIA becomes unnecessary: Semantic HTML often eliminates need for ARIA labels. <nav> doesn’t need role="navigation" because its semantic meaning is built-in.

Accessibility lawsuits have increased dramatically. Using semantic HTML from the start prevents costly retrofitting later.

SEO Advantages

Search engines use semantic HTML to understand content:

Content hierarchy: Proper heading structure (<h1> through <h6>) helps search engines understand page organization. Using styled <div> instead of headings obscures this structure.

Article identification: <article> elements signal distinct content pieces, helping search engines identify and index individual items on list pages.

Navigation clarity: <nav> elements indicate site structure, helping crawlers understand site architecture.

While search engines have become sophisticated, semantic markup remains a ranking factor. Why make their job harder by using generic containers for everything?

Maintainability and Developer Experience

Semantic HTML improves code maintainability:

Self-documenting code: Reading <header>, <nav>, <main>, <footer> immediately communicates page structure without reading class names or comments.

Reduced CSS specificity: Styling article header is clearer than .card .card-header. Semantic selectors align CSS structure with HTML structure naturally.

Framework independence: Semantic HTML outlasts frameworks. A properly marked-up document remains understandable and functional even if JavaScript fails or CSS doesn’t load.

Easier onboarding: New developers understand semantic markup faster than project-specific <div> soup with custom class conventions.

Common Semantic Elements

Key elements every developer should use:

Document structure:

<header>: Introductory content or navigational aids
<nav>: Navigation links
<main>: Dominant content
<article>: Self-contained composition
<section>: Thematic grouping
<aside>: Tangentially related content
<footer>: Footer information

Text content:

<h1>-<h6>: Headings (one <h1> per page)
<p>: Paragraphs
<blockquote>: Quotations
<ul>, <ol>, <li>: Lists
<figure>, <figcaption>: Images with captions

Inline semantics:

<strong>: Strong importance
<em>: Emphasis
<mark>: Highlighted text
<time>: Dates and times
<code>: Code snippets

When DIVs Are Appropriate

<div> and <span> aren’t wrong—they’re for content without semantic meaning, typically layout containers or styling hooks. Using them for truly non-semantic purposes is correct.

The issue is overuse. A page of nested divs with class names like .header-wrapper .header-inner .header-content suggests missing semantic structure that proper elements would provide.

Framework Considerations

Modern frameworks like React encourage component thinking, sometimes at semantic HTML’s expense:

// Problematic
<Container>
  <Row>
    <Column>
      <Card>Content</Card>
    </Column>
  </Row>
</Container>

This creates <div> hierarchy that obscures semantic meaning. Better:

<article className="card">Content</article>

Framework components should render semantic HTML, not add non-semantic wrappers. Good component libraries expose semantic options or render appropriate elements by default.

HTML5 and Beyond

HTML5 introduced many semantic elements still underutilized:

<details> and <summary> for disclosure widgets
<dialog> for modal dialogs
<output> for calculation results
<progress> and <meter> for progress indicators

These elements provide built-in functionality and accessibility that requires significant JavaScript and ARIA to replicate with divs.

Validation and Linting

Tools help enforce semantic HTML:

HTML validators: W3C validator catches invalid nesting and attribute errors Accessibility linters: Tools like axe or pa11y identify semantic and accessibility issues Editor extensions: Real-time feedback during development

Integrating these into build processes catches problems before deployment.

Progressive Enhancement

Semantic HTML forms the foundation of progressive enhancement:

Start with semantic, functional HTML
Add CSS for visual design
Enhance with JavaScript for interactivity

This approach ensures basic functionality works for everyone, with enhancements for capable browsers. Starting with non-semantic divs and building everything with JavaScript creates fragile, inaccessible experiences.

Conclusion

Semantic HTML isn’t nostalgic attachment to old standards but recognition that HTML’s core purpose—describing content structure—remains essential. Frameworks come and go, but well-structured HTML endures.

Using semantic elements improves accessibility, SEO, maintainability, and user experience. It costs nothing—these elements are built into HTML—but delivers ongoing benefits.

Before reaching for another div, ask: is there a semantic element that better describes this content? More often than not, there is. Use it.

Learn more about semantic HTML at the MDN Web Docs.