Semantic HTML for Accessibility

Semantic HTML isn’t just about cleaner code — it’s about communicating structure and purpose to both browsers and people. For users relying on screen readers, these tags transform a flat document into a meaningful experience.

Semantic HTML uses tags that describe their meaning in a human- and machine-readable way. Tags like <header>, <nav>, <article>, and <footer> tell assistive technologies what each part of the page is for.

When screen readers parse semantic HTML, they can:

• Navigate by regions like main, navigation, and footer
• Skip to sections of interest (e.g., article headlines, sidebars)
• Understand the structure of your page more easily

<header>
  <h1>Welcome to Fruit World</h1>
</header>

<nav>
  <a href="#apples">Apples</a>
  <a href="#bananas">Bananas</a>
  <a href="#cherries">Cherries</a>
</nav>

<main>
  <article id="apples">
    <h2>All About Apples</h2>
    <p>Apples are crisp, juicy fruits enjoyed worldwide.</p>
  </article>

  <article id="bananas">
    <h2>Benefits of Bananas</h2>
    <p>Bananas are rich in potassium and fiber.</p>
  </article>

  <article id="cherries">
    <h2>Cherry Facts</h2>
    <p>Cherries come in sweet and tart varieties.</p>
  </article>
</main>

<footer>
  <p>© 2024 Fruit World</p>
</footer>

[ Screen readers announce regions like "Main content", "Article: Cherry Facts", etc. ]

Screen readers and search engines build an outline from your headings and semantic tags. Proper use of <h1> to <h6> and <section> ensures the document is navigable and logical.

Example: Logical Hierarchy

<main>
  <section>
    <h2>Item 1: Apple</h2>
    <p>Details about apple.</p>
  </section>
  <section>
    <h2>Item 2: Banana</h2>
    <p>Details about banana.</p>
  </section>
</main>

Semantic HTML often makes ARIA unnecessary. For example:

Semantic HTML gives structure, improves accessibility, and enhances the user experience for all. You now know how to:

• Use semantic tags like <article>, <nav>, and <main>
• Improve screen reader experience
• Enhance your document’s outline and SEO

Choose the option that lists all and only the correct statements.

1. section
2. div
3. article
4. footer

Choose the option that lists all and only the correct statements.

1. Using
2. Using
   for page or section headers
3. Using multiple
   tags on a single page
4. Using
   to encapsulate self-contained content

Coming up: We’ll bring semantic and accessible HTML together in a full-page layout — complete with keyboard support and ARIA enhancements where needed.