Semantic HTML as Accessibility

Semantic HTML is HTML that uses the right element for the right content. A navigation list uses <nav>. An article uses <article>. A button uses <button>. This is not just a style preference — it is the mechanism by which browsers and assistive technologies understand a page.

What “semantic” means

A semantic element carries meaning beyond its visual appearance. Compare:

<!-- Non-semantic: says nothing about what this is -->
<div class="nav-container">
  <div class="nav-link">Home</div>
  <div class="nav-link">Tours</div>
</div>

<!-- Semantic: the browser and screen reader know this is navigation -->
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="tours.html">Tours</a></li>
  </ul>
</nav>

The first version looks identical in a browser — with CSS it can look exactly the same. But to a screen reader, the first version is a box of text. The second version is a navigation region containing a list of links.

How assistive technologies use semantic structure

Screen readers build a mental model of the page from its HTML. They expose:

• Landmarks — the major regions of the page (<header>, <nav>, <main>, <footer>)
• Headings — the document outline that users can navigate through
• Lists — announced as “list of N items” so users know what they are entering
• Links — navigable by Tab, announced with their text
• Form controls — announced with their associated label text
• Buttons — announced as interactive, with their visible label

When you use a <div> for navigation instead of <nav>, screen reader users lose the ability to jump directly to the navigation region. When you use a styled <span> as a button, keyboard users cannot press Enter to activate it. When you use a <p> for a list of items, screen readers cannot count the items.

Semantic vs non-semantic: a full example

Non-semantic version:

<div class="header">
  <div class="site-name">Summit Trail Outfitters</div>
  <div class="navigation">
    <div><a href="index.html">Home</a></div>
    <div><a href="tours.html">Tours</a></div>
    <div><a href="about.html">About</a></div>
  </div>
</div>

<div class="main-content">
  <div class="intro">
    <div class="big-heading">Your Next Adventure Starts Here</div>
    <div class="sub-text">Guided hiking in the Pacific Northwest.</div>
  </div>
</div>

Semantic version:

<header>
  <p>Summit Trail Outfitters</p>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="tours.html">Tours</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h1>Your Next Adventure Starts Here</h1>
    <p>Guided hiking in the Pacific Northwest.</p>
  </section>
</main>

The semantic version tells the browser and screen reader:

• This is the site header (a landmark)
• This is navigation (a landmark with a list of links)
• This is the main content (a landmark)
• This is a section with a level-1 heading

The non-semantic version communicates none of that — it is just boxes and text.

Why semantic elements cannot be replaced by CSS classes

Adding class="nav" to a <div> does not make it a navigation landmark. CSS classes are styling hooks — they carry no meaning to the browser or assistive technologies. Only the HTML element name itself communicates semantic meaning.

This is why <div class="button"> is not a button. A <div> is not keyboard focusable, cannot be activated with Enter or Space, and is not announced as interactive by screen readers. <button> is all of those things by default.

Exercise

Open index.html from your Summit Trail Outfitters project. Work through this review:

1. Confirm every major page region uses the correct semantic element:

   • Site header → <header>
   • Navigation → <nav> with <ul> and <li>
   • Main content → <main>
   • Each content region → <section> with a heading
   • Tour previews → <article>
   • Site footer → <footer>

2. Look for any <div> elements. For each one, ask: is there a semantic element that fits better? If yes, replace it.

3. Check tours.html, about.html, and contact.html for the same issues.

After your review, every page should use semantic structure with no <div> elements in place of landmark or content elements.

Recap

• Semantic HTML uses the right element for the right content — not just any container.
• Assistive technologies use semantic elements to expose landmarks, headings, lists, links, and form controls to users.
• <div> and <span> carry no meaning. They are appropriate only when no semantic element fits.
• CSS classes do not add semantic meaning. Only the element name matters to the browser and screen readers.
• The Summit Trail Outfitters pages you built in Module 08 are already largely semantic — this lesson makes that practice intentional.