Semantic HTML as the Foundation
🏗️ Semantic HTML as the Foundation
Why Div-Soup Breaks Accessibility
A <div> carries no semantic meaning at all — to assistive technology, it's just a generic container, nothing more:
A "Button" Made of a Div
<div onclick="...">
No role announced to a screen reader, not in the tab order by default, no Enter/Space activation — sighted mouse users see a button; everyone else gets nothing.
<button>
Correct role, correct tab order, correct Enter/Space activation, correct focus styling — all for free, out of the box.
The browser and assistive technology get zero information about what an element is or does beyond its visual appearance — which sighted users take entirely for granted.
What Native Elements Give You for Free
This is the reason native semantics beat reimplementing behavior with JavaScript — a point Chapter 3 returns to directly for ARIA.
🗺️ Sectioning & Landmark Elements
| Element | Landmark Role |
|---|---|
<header> | banner |
<nav> | navigation |
<main> | main |
<aside> | complementary |
<footer> | contentinfo |
Screen reader users can pull up a list of landmarks and jump straight to "main content," skipping navigation entirely — a genuinely powerful shortcut sighted users don't even notice they have. An all-<div> page forces linear listening through everything, with no way to skip around at all.
Heading Hierarchy
h1–h6 form an outline of the page's actual content structure. Screen reader users frequently navigate by heading level — jumping to the next h2, for instance — which only works if headings are used hierarchically, not skipped or chosen for their default visual size.
Buttons vs Links: A Real Distinction
<button> is for actions that don't navigate — opening a modal, submitting a form, toggling a menu. <a href> is for navigation — a different page, or a different section via a # anchor. Using the wrong one confuses a screen reader user about what will actually happen on activation — directly undermining Chapter 1's Understandable principle.
💻 Coding Challenges
Challenge 1: Fix a Div-Based Button
Rewrite <div class="btn" onclick="submitForm()">Submit</div> using the correct native element, preserving the same visual class.
Goal: Practice the most fundamental semantic-HTML fix in this chapter.
Challenge 2: Add Landmark Structure to a Div-Only Page
Given a page built entirely from generic <div>s (one for the top nav, one for the main content, one for a footer), rewrite it using the correct landmark elements.
Goal: Practice replacing div-soup with the elements that create real, jumpable landmarks.
Challenge 3: Choose Button vs Link
For each of (a) a "Log out" control that clears a session and redirects to the homepage, and (b) a "Read more" control that expands a hidden paragraph in place without navigating anywhere, choose <button> or <a href> and justify each.
Goal: Practice applying the navigates-vs-acts distinction to realistic, slightly ambiguous cases.
It's tempting to reach for <h3> somewhere simply because its default font size "looks right" for a given piece of text — skipping <h2> entirely in the process. This breaks heading-based screen reader navigation: jumping from an h1 straight to an h3 suggests to someone navigating by heading level that an entire section is missing. Choose the heading level based on the content's actual position in the document's hierarchy, then adjust its visual size with CSS separately — never the reverse.
🎯 What's Next
With the semantic foundation in place, the next chapter covers what to do when native HTML genuinely isn't enough: ARIA: When and When Not to Use It — the first rule of ARIA, and why misusing it can be worse than no ARIA at all.