Semantic HTML & Accessibility

Understanding Semantic HTML & Accessibility

Semantic HTML improves accessibility by describing the meaning and purpose of webpage content through the elements used to structure it.

When HTML elements accurately represent their content, browsers and assistive technologies can identify headings, navigation, main content, articles, buttons, forms, and other parts of a webpage without depending entirely on its visual appearance.

What Is Semantic HTML?

Semantic HTML uses elements according to the meaning and purpose of the content they contain. The element itself provides information about what that content represents within the document.

For example, <nav> identifies a major group of navigation links, <main> identifies the primary content, and <button> identifies an interactive control that performs an action.

<nav>
  <a href="/index.html">Home</a>
  <a href="/about.html">About</a>
  <a href="/contact.html">Contact</a>
</nav>

<main>
  <h1>Gardening Guide</h1>
  <p>Learn how to plan and maintain a home garden.</p>
</main>

This meaning exists independently of the CSS used to style the page.

How Semantics Improve Accessibility

People who can see a webpage often recognize its structure from visual clues such as size, color, spacing, borders, and position. Those visual clues alone do not reliably communicate the same information to assistive technologies.

Semantic HTML provides structure in the markup itself. A screen reader can recognize an actual heading as a heading, identify navigation and main-content regions, and recognize native links, buttons, lists, tables, and form controls according to their defined purposes.

This allows people to understand and navigate the page using more than its visual presentation.

Page Landmarks

Several semantic HTML elements can identify important regions of a webpage. Assistive technologies may expose these regions as landmarks that help users move between major areas of the page.

Using these elements appropriately can provide useful navigation points without adding accessibility information manually.

Content Structure

Semantic HTML also describes relationships within the content itself. Headings establish organization, lists identify related items, tables describe tabular data, and elements such as <article> and <section> help organize larger portions of a document.

<article>
  <h2>Growing Tomatoes</h2>
  <p>Tomatoes grow best in a sunny location.</p>

  <section>
    <h3>What You Need</h3>
    <ul>
      <li>Tomato plants</li>
      <li>Garden soil</li>
      <li>Plant supports</li>
    </ul>
  </section>
</article>

The markup communicates that the heading, paragraph, subsection, and list belong to a related piece of content rather than simply positioning those items visually.

Use Native HTML Elements

Native HTML elements should generally be used when an element already exists for the content or interaction you need. Native elements provide built-in semantics and often include expected keyboard and browser behavior.

For example, use a link for navigation:

<a href="/contact.html">Contact Us</a>

Use a button for an action:

<button type="button">Show Details</button>

Use a checkbox for a selectable on-or-off option:

<label>
  <input type="checkbox" name="newsletter">
  Subscribe to newsletter
</label>

Starting with the appropriate native element usually produces simpler HTML and reduces the amount of additional accessibility work required.

Generic Elements

The <div> and <span> elements are useful generic containers, but they do not describe the purpose of their content by themselves. They should not replace semantic elements simply because CSS can make them look the same.

For example, this may visually resemble a button after CSS is applied:

<div class="button">Show Details</div>

However, a generic <div> does not automatically provide the semantics, keyboard behavior, or interaction expected from a button.

When the element performs a button action, use the native element:

<button type="button">Show Details</button>

Meaning vs. Visual Appearance

HTML should describe what content means, while CSS controls how that content looks. A heading should be marked as a heading because it introduces a section, not simply because the text should appear large and bold.

This text may look like a heading after CSS is applied:

<div class="large-bold-text">Garden Supplies</div>

But if the text actually functions as a heading, the appropriate heading element communicates that structure:

<h2>Garden Supplies</h2>

CSS can then change the visual appearance of the heading without removing its meaning from the document structure.

Semantic HTML Example

The following example uses semantic elements to identify navigation, main content, an article, a section, and supporting content.

<header>
  <h1>Example Garden Center</h1>
</header>

<nav aria-label="Main navigation">
  <a href="/plants.html">Plants</a>
  <a href="/supplies.html">Supplies</a>
</nav>

<main>
  <article>
    <h2>Starting a Vegetable Garden</h2>
    <p>A successful garden begins with a good location.</p>

    <section>
      <h3>Choose a Sunny Location</h3>
      <p>Most vegetables need several hours of sunlight each day.</p>
    </section>
  </article>

  <aside>
    <h2>Garden Tip</h2>
    <p>Check the soil before planting.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Example Garden Center</p>
</footer>

The page remains understandable as a structured document even without CSS because the HTML itself describes the purpose and relationship of its content.

Best Practices

• Choose HTML elements according to the meaning and purpose of the content.
• Use native HTML controls instead of recreating them with generic elements whenever possible.
• Use semantic page regions such as <nav> and <main> appropriately.
• Use headings to represent the actual organization of the content.
• Use lists for lists, tables for tabular data, links for navigation, and buttons for actions.
• Do not choose HTML elements solely because of their default visual appearance.
• Use CSS to control presentation without replacing meaningful HTML structure.
• Add ARIA only when native HTML does not provide the semantics or accessibility information required.

Summary

Semantic HTML provides meaning and structure that browsers and assistive technologies can interpret. Appropriate elements can identify page landmarks, headings, navigation, lists, controls, and relationships between different parts of the content.

Using semantic HTML does not automatically make every webpage accessible, but it provides an important foundation. The next tutorial looks specifically at creating an accessible heading structure.