Why semantic HTML

Semantic HTML means using tags that describe what content is, not just how it looks. Here´s why it matters:

1. Accessibility

Screen readers and assistive tech rely on semantic tags to build a navigable outline of the page. A <nav> tells a screen reader "this is navigation, skip to it if you want." A <button> is focusable and triggerable with Enter/Space by default.
A not semantic tag like <div onclick="..."> gives none of that for free, you'd have to manually add role, tabindex, and keyboard handlers to replicate what semantic HTML already does.

2. SEO

Search engines weigh content inside <article>, <h1> to <h6>, and <main> more heavily when figuring out what a page is about and how it's structured. Non-semantic markup gives crawlers less signal to work with.

3. Maintainability

Compare:

<!-- Non-semantic -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="post">...</div>
</div>

<!-- Semantic -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

The second version is self-documenting. A new developer (or you, six months later) can scan the tag names and understand the page structure without reading class names or comments.

4. Built-in browser behavior

Semantic elements often come with free functionality:

<button> is keyboard-accessible and focusable by default
<a href> supports right-click "open in new tab," middle-click, etc.
<form> and <input type="email"> get native validation
<details>/<summary> gives you a collapsible widget with zero JS

5. Consistency across tools

Browsers, reader-mode extensions, RSS parsers, and other tools that extract "the article content" from a page rely on tags like <article> and <main> to know what to grab. Non-semantic divs make that guesswork.

Semantic HTML takes a bit more thought upfront - you have to actually consider what each piece of content is - but it pays for itself in accessibility compliance, SEO, and long-term codebase sanity. The rule of thumb: reach for a semantic tag if one fits; fall back to <div>/<span> only when there's genuinely no semantic meaning to express (a styling wrapper, for instance).