0
0
HTMLmarkup~5 mins

Semantic elements and screen readers in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Semantic elements help organize web pages clearly. Screen readers use them to read content correctly to people who cannot see the screen.

When building a webpage that should be easy to understand for everyone.
When you want your website to work well with assistive tools like screen readers.
When you want to improve your website's search engine ranking by using proper structure.
When you want to make navigation easier for keyboard users.
When you want to clearly separate parts of your page like header, navigation, main content, and footer.
Syntax
HTML
<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<article>...</article>
<footer>...</footer>

Use semantic tags to describe the role of each part of your page.

Screen readers recognize these tags and help users understand the page layout.

Examples
The <header> tag defines the top section of the page, usually with a title or logo.
HTML
<header>
  <h1>My Website</h1>
</header>
The <nav> tag groups navigation links so screen readers can jump to them easily.
HTML
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
The <main> tag holds the main content, and <article> is for independent content pieces.
HTML
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>
The <footer> tag defines the bottom section with copyright or contact info.
HTML
<footer>
  <p>Ā© 2024 My Website</p>
</footer>
Sample Program

This page uses semantic elements to organize content clearly. The aria-label on <nav> helps screen readers identify the navigation area.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Elements Example</title>
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
  </header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <main>
    <section id="home">
      <h2>Home</h2>
      <p>This is the home section with important info.</p>
    </section>
    <section id="services">
      <h2>Services</h2>
      <article>
        <h3>Web Design</h3>
        <p>We create beautiful websites.</p>
      </article>
      <article>
        <h3>SEO</h3>
        <p>Improve your site ranking on search engines.</p>
      </article>
    </section>
  </main>
  <footer>
    <p>Contact us at info@example.com</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always add lang attribute on <html> for screen readers to know the language.

Use aria-label or aria-labelledby to give extra descriptions to regions if needed.

Semantic elements improve keyboard navigation and help search engines understand your page.

Summary

Semantic elements give meaning to parts of your webpage.

Screen readers use these elements to read content in a helpful order.

Using semantic tags makes your website easier to use for everyone.