Accessibility Semantic Elements

Why Semantic HTML Matters

Semantic HTML means choosing elements that describe the meaning and structure of your content, not its appearance. Instead of using generic containers like <div> and <span> for everything, semantic elements (such as <header>, <nav>, <main>, <section>, and <footer>) tell browsers, search engines, and assistive technologies what each part of your page is.

Using semantic HTML improves:

• Accessibility - screen readers can interpret and navigate your content more accurately.
• SEO - search engines understand what your content represents.
• Readability - both developers and machines can understand your page structure at a glance.

Semantic HTML makes the code meaningful before any CSS or styling is applied.

Non-Semantic Version - Works… but says very little

Everything is just a <div> and <span>. A screen reader, search engine, or new developer has no idea what any of this represents.

<div>
  <div>My Portfolio</div>
  <div>
    <div>Home</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>

<div>
  <div>Welcome to my site</div>
  <div>
    <div>This is my portfolio website.</div>
    <div>I am learning web development.</div>
  </div>
</div>

<div>
  <div>© 2025 My Name</div>
</div>

What's wrong here?

• No clear page structure
• No clear navigation
• No clear main content
• No clear footer
• Assistive tech has to guess what everything is

Semantic Version - Same Content, Clear Meaning

Now let's write the same page using meaning instead of layout hacks:

<header>
  <h1>My Portfolio</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>Welcome to my site</h2>
    <p>This is my portfolio website.</p>
    <p>I am learning web development.</p>
  </section>
</main>

<footer>
  <p>© 2025 My Name</p>
</footer>

Even without content, you immediately understand:

• where the navigation is
• where the main content begins
• where the footer lives
• how the page is organized

This is exactly the kind of structure assistive technologies rely on to help users navigate the web.

The Accessibility Tree (AOM), in Simple Terms

As the browser loads your page, it builds several internal structures:

• DOM - your HTML elements
• CSSOM - your styles
• Accessibility Tree - a version of your content made specifically for assistive technologies

Semantic HTML automatically gives the accessibility tree meaningful roles like:

• banner (site header)
• navigation
• main
• contentinfo (footer)

Screen readers use these roles to allow users to jump quickly between major areas of the page. You don't need to understand accessibility APIs - just know semantic tags make the accessibility tree accurate with no extra work from you.

When Should You Use the role Attribute?

HTML's semantic elements already come with implicit roles, so you normally don't need to add role="..." manually.

For example:

• <button> is already a button
• <nav> is already navigation
• <header> at the top level already has the "banner" role

Only use role when:

• you're creating a custom interactive element
• you must clarify a role that HTML cannot express on its own

But in beginning web development, the rule is simple:

👉 Use semantic elements whenever possible instead of adding roles manually.

How Semantic Elements Benefit Everyone

Semantic HTML improves:

• screen reader navigation
• keyboard navigation
• mobile layout understanding
• search engine interpretation
• developer clarity

It's the foundation of accessible, modern web development.

Try It: Make Part of Your Portfolio Semantic

Open one of your project pages and check whether you've used:

<header>
<nav>
<main>
<section>
<footer>

• <h1>–<h3> headings in logical order

Replace unnecessary <div> tags with semantic elements where appropriate.

Source: Khalil Abdullah and Saylor University
This work is licensed under a Creative Commons Attribution 4.0 License.

Source: Kevin Powell