HTML & Semantics

Structured content with behaviour attached. What a `button` gives you that a clickable `div` silently takes away — keyboard, focus, defaults, assistive technology, tooling.

Semantics Are Behaviour
▶ lab

Choosing an element selects a role, a place in the tab order, a set of keyboard defaults, an activation behaviour and an entry in the accessibility tree. `div` selects none of them.

Q · What does the browser actually do differently when I write `button` instead of `div`?
Document Structure and Reading Order
▶ lab

Landmarks, headings and source order are the navigation system most of your users never see — and the one CSS can silently disagree with.

Q · How does someone who cannot see the layout find their way around this page?
What Native Elements Already Do
▶ lab

Activation behaviour, form participation, implicit submission, the top layer and constraint validation — the platform features most component libraries reimplement, more slowly and less completely.

Q · Before I build this component, what does the browser already implement, and what exactly breaks when I take it over?
The Head: Metadata That Changes Rendering
▶ lab

Charset, viewport, lang, title and the link relations decide how the rest of the document is decoded, sized, named, shared and blocked — before a single pixel of body content exists.

Q · Which parts of `<head>` actually change what the browser does, and which are only for other people's crawlers?
Images, Video and the Elements That Own Their Layout
▶ lab

Replaced elements bring their own dimensions, their own bytes and their own decode memory — and nearly every problem they cause is fixed with an attribute rather than with code.

Q · What do the media elements actually do, and which attributes change the browser's work rather than the appearance?
Div Soup: How It Happens and What It Costs
▶ lab

Nobody sets out to write forty nested divs. They arrive one justified wrapper at a time, and the bill is paid in accessibility, style recalculation and JavaScript you had to write yourself.

Q · Why does markup drift towards meaningless nesting, and what does each extra wrapper actually cost?