HTML semantics

A div means nothing. That is not a criticism — it is the definition. Every other element carries a meaning the browser can act on.

A page built entirely from divs looks identical to one built from headings, lists and navigation. The difference only shows up where you are not looking: in a screen reader, in a search result, in the reading mode of a browser, on a keyboard.

A screen reader can jump between headings, so an h1 is a signpost rather than large text. It can list every landmark on the page, so a nav is a way to skip to the menu. It announces "list, 3 items", so a ul tells someone what is coming before they hear it.

The rule is simpler than the element list makes it look: describe what the thing *is*, not what it should look like. A heading is a heading even when the design makes it small. Reach for div only once you have decided nothing else fits — it is the element for grouping when there is genuinely nothing to say.

None of this costs anything. The same markup, spelled honestly, is shorter than the div soup it replaces and needs no ARIA to explain itself.

<!-- looks the same, means nothing -->
<div class="title">Recipes</div>

<!-- looks the same, means something -->
<h1>Recipes</h1>
Both render identically once styled. Only one of them can be navigated to.

Exercises0/4

  1. 1A heading is a headingh1account
  2. 2Three things in a rowul · liaccount
  3. 3Somewhere to skip tonavaccount
  4. 4A piece that stands alonearticle · headeraccount
HTML semantics — Beginner · CSS Duel