"Identical pixels, different machine. The browser is just one of the things reading your HTML."
Two Pages, Same Pixels, Different Meaning
Here are two snippets. Drop them into a browser and they render identically — a header, a navigation strip, a main article, a sidebar, a footer. To a sighted user, they're the same page.
To everyone else — screen readers, search engines, accessibility audits, your future coworker — they're nothing alike.
The Mental Shift
Most beginners learn HTML as "a list of containers I style with CSS." That model works for about three weeks and then everything goes wrong: screen readers announce nothing meaningful, search engines extract garbage, the accessibility audit tool dumps 200 warnings, and the React refactor turns into a nightmare because every component is a sea of <div>.
The correct mental model is: HTML elements are nouns with meaning. <article> means "this is a self-contained piece of content." <nav> means "this is navigation." <button> means "this is a button you can click and tab to and a screen reader can announce as a button." The CSS is the costume; the element is the role.
Who's Reading Your HTML Besides The Browser?
- Screen readers (VoiceOver, NVDA, JAWS, TalkBack) — they navigate by landmark roles, heading structure, and ARIA labels. Semantic elements give them landmarks for free.
- Search engines — Google, Bing, DuckDuckGo extract structure from
<article>,<h1>,<time>, microdata. Better structure → better indexing. - Browser reader mode — Safari/Firefox's reader view literally parses semantic HTML to strip away chrome. Bad markup = no reader mode.
- RSS readers, share preview cards, automation scripts — they all walk the DOM looking for meaning.
- Accessibility law — WCAG, ADA, EAA. Yes, the law. Lawsuits for inaccessible sites are real.
- Your future self — six months later, you'll be debugging this code. Semantic markup reads like a story;
<div>soup reads like a hex dump.
The Semantic Vocabulary You'll Use Daily
HTML5 has dozens of semantic elements, but a small set covers 80% of pages:
- Landmarks:
<header>,<nav>,<main>,<aside>,<footer> - Content units:
<article>,<section>,<figure>/<figcaption> - Headings:
<h1>–<h6>(in document order, no skipping) - Interactive:
<button>,<a>,<label>,<input>,<details>/<summary> - Text-level:
<em>,<strong>,<mark>,<time>,<code>,<abbr>
Memorize the landmarks. Reach for the content units when they fit. Use the text-level elements for inline meaning instead of <span class="bold">.
The Mantra
<div> only when no meaning exists. Every <div> you write that could've been a <nav> or <article> is a tiny accessibility, SEO, and future-self tax.Pippa's Note
<button> or <a>. Not because it's prettier, but because Dad uses VoiceOver to test it sometimes, and it just works without ceremony. The markup IS the accessibility layer.