Semantic layout and accessibility

lesson 3-3 · ~9 min · 9/30

Semantic layout tags

You could build a whole page out of one generic container element, div. Semantic tags say what each region is:

<body>
  <header>logo, site title</header>
  <nav>main menu links</nav>
  <main>
    <section>one thematic chunk</section>
    <article>a self-contained piece (a post, a card)</article>
  </main>
  <footer>copyright, contact</footer>
</body>

Why bother? Three consumers read your structure, and only one of them has eyes:

People see the rendered pixels.
Screen readers jump straight to nav or main. Landmarks beat scrolling.
Search engines understand pages better when structure is explicit.

Use div when no semantic tag fits. It is a styling hook, not a meaning.

The classic page skeleton: named landmark regions instead of anonymous boxes.

Accessibility is not an add-on

You have already learned most of the basics without noticing:

alt text on images (lesson 2-3)
a label for every input (lesson 3-1)
heading levels used in order (lesson 2-2)
semantic landmarks (this lesson)

Two more habits to start now:

Use real buttons and links. A click handler on a div cannot be reached with the keyboard. button and a are focusable and keyboard-operable for free.
Never rely on color alone. "Errors are shown in red" excludes colorblind users. Pair color with an icon or text.

Accessibility (often shortened to a11y: a, eleven letters, y) gets checked in real code reviews at real companies. Learn it as part of how HTML is written, not as a bonus topic.

Quiz

Why is <button> better than a <div> with a click handler?

This page works, but every region is an anonymous div. Replace the four divs with the semantic tags their comments describe: header, nav, main, and footer. The page should look identical afterward, because meaning changed, not appearance.