Why semantic tags matter (the screen-reader test)

A page made of <div> is invisible to half its users

Open Safari → Preferences → Accessibility → enable VoiceOver. Navigate this page:

<div class="header">
  <div class="logo">CodeMentor</div>
  <div class="nav">
    <div>Home</div><div>Courses</div><div>Pricing</div>
  </div>
</div>
<div class="main">
  <div class="title">Welcome</div>
  <div class="body">Lorem ipsum.</div>
</div>

VoiceOver reads it as: "CodeMentor. Home. Courses. Pricing. Welcome. Lorem ipsum." — one undifferentiated wall of words. The user has no idea what's the header, what's the nav, where the main content starts.

Now the semantic version:

<header>
  <strong>CodeMentor</strong>
  <nav>
    <ul><li>Home</li><li>Courses</li><li>Pricing</li></ul>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
  <p>Lorem ipsum.</p>
</main>

VoiceOver reads it as: "Banner landmark, CodeMentor. Navigation landmark, list of 3 items: Home, Courses, Pricing. Main landmark, heading level 1, Welcome. Lorem ipsum."

What changed (zero visual difference)

Same pixels on screen. But:

• Screen readers announce landmarks. Users can jump straight to "main" with one keystroke.
• Google's crawler weights content inside <main> over content inside <aside>.
• "Reader mode" in browsers (Safari, Firefox) uses semantic tags to figure out what to keep.
• CSS like main { padding: 24px } becomes self-documenting.

The cost of using semantic tags is zero. The cost of not using them is half your potential users.