Semantic HTML for Accessibility

Semantic HTML

Using the right HTML elements communicates purpose to assistive technologies without extra ARIA markup. Prefer native elements over generic divs.

Example

<!-- Bad: div soup -->
<div class="nav">
  <div class="nav-item" onclick="go()">Home</div>
</div>

<!-- Good: semantic elements -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Page structure landmarks -->
<header> <nav> <main> <aside> <footer>
<!-- Headings: logical order -->
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>

HTML

Full Editor

Pro Tip

The first rule of ARIA: do not use ARIA if you can use a native HTML element instead.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned