07. Semantic HTML and Accessibility

Semantic HTML communicates the role of each page region. It makes code easier to maintain and gives browsers, search engines, and assistive technologies a clearer understanding of the page.

Meaningful page regions

<header>
  <h1>Cambridge Learning Centre</h1>
  <nav aria-label="Main navigation">...</nav>
</header>
<main>
  <article>
    <h2>Learn HTML</h2>
    <section>...</section>
  </article>
  <aside>Related resources</aside>
</main>
<footer>Copyright information</footer>

Accessibility essentials

• Set the correct document language.
• Use a logical heading hierarchy.
• Provide meaningful alternative text.
• Associate form fields with labels.
• Use buttons for actions and links for navigation.
• Keep keyboard focus visible when CSS is added.
• Do not rely on color alone to communicate meaning.

Validate your HTML

Small markup mistakes can create unpredictable behavior. Check nesting, closing tags, duplicate IDs, and meaningful structure. A standards validator can help locate errors, but you should also test the page using a keyboard and more than one browser.

Practice activity

Replace generic wrapper elements in your project with appropriate header, nav, main, section, article, and footer elements. Then navigate the page using only the keyboard.