Semantic HTML and accessibility

Imagine two pages that look exactly the same. One is built only from <div> elements, the other from <header>, <nav>, <main> and <footer>. To the eye there is no difference. But a blind user with a screen reader, a search engine, and even you reading the code a few months later will notice a huge one. That is semantic HTML.

What is semantic HTML?

<div> (block) and <span> (inline) are neutral containers — they say nothing about the content. They are useful for styling with CSS, but whenever a meaningful element exists, prefer it.

Page landmarks

<style>
  body { font-family: system-ui, sans-serif; margin: 0; color: #1e293b; }
  header, nav, main, footer { padding: 8px 12px; }
  header { background: #fde68a; font-size: 20px; }
  nav { background: #bfdbfe; }
  main { background: #f1f5f9; }
  article { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 12px; }
  aside { background: #ddd6fe; margin-top: 8px; padding: 6px 12px; border-radius: 8px; }
  footer { background: #e2e8f0; font-size: 14px; }
</style>

<header><strong>City Library</strong></header>
<nav><a href="books.html">Books</a> · <a href="events.html">Events</a></nav>
<main>
  <article>
    <h2>New books this week</h2>
    <p>Ten new novels are waiting for you.</p>
  </article>
  <aside>Tip: you can renew your books online.</aside>
</main>
<footer>© City Library</footer>

Screen readers offer a list of these landmarks, so a user can jump straight to <main> or <nav> — like a table of contents for the page's structure. Search engines also understand better where the main content is.

Accessibility: a web for everyone

Accessibility (a11y for short) means that people with different abilities can use a page: blind and low-vision users (screen readers, zoom), deaf users (captions), people who can't use a mouse (keyboard only) and people who have trouble telling colors apart. Most of it comes for free with correct HTML.

• Give every meaningful image an alt text, and decorative ones alt="".
• Use headings in order — screen reader users often jump from heading to heading.
• Use <button> for actions and <a> for navigation. A clickable <div> can't be reached with the keyboard (Tab) or pressed with Enter.
• Every form field needs a <label>.
• Set the page language: <html lang="en"> — so the screen reader pronounces words correctly.
• Don't rely on color alone: “red fields are required” doesn't work for someone who can't tell colors apart — add text or an asterisk (*). Also keep enough contrast between text and background.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .fake, button { display: inline-block; margin: 6px 0; padding: 8px 16px; font: inherit;
    color: white; background: #4f46e5; border: 0; border-radius: 6px; cursor: pointer; }
  button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
</style>

<p>Click here, then press <kbd>Tab</kbd> a few times.</p>
<div class="fake" onclick="this.textContent = 'Clicked!'">I am a div</div>
<br>
<button onclick="this.textContent = 'Clicked!'">I am a button</button>

ARIA: when HTML is not enough

ARIA attributes (aria-label, aria-hidden, role) give extra information to assistive technologies. For example, a button with only an icon: <button aria-label="Close">✕</button>. Without aria-label, a screen reader would read out just the symbol, and the user wouldn't know what the button does. aria-hidden="true" hides decorative icons from screen readers.