A short guide to semantic HTML

This is cheap to get right at the start and expensive to retrofit. Everything we would tell a client about semantic HTML in the time it takes to drink a coffee.

Most development decisions are really maintenance decisions wearing a different hat. Check it against what you would want a competitor's site to get wrong.

What is actually at stake

The right element gives you behaviour and accessibility for free. None of that requires a large budget, only a decision and someone to own it. The version that survives contact with a real deadline is the simple one.

How we handle it

A div with a click handler is not a button. In practice this is a scheduling problem more than a technical one. If two people in the business would answer this differently, that gap is the actual problem.

What to watch for

Semantic markup is the cheapest accessibility work available. The teams that handle this well are rarely the ones with the biggest budgets. It rarely shows up as a line item, which is exactly why it slips.

What this looks like day to day

Code gets read far more often than it gets written, and usually by someone with less context than the author had. Three things worth confirming about semantic HTML before you move on:

• Someone can say what the current setup is without going to look
• Semantic markup is the cheapest accessibility work available — and you know whether that is true here
• There is a way to tell whether the last change to this helped

If any of that sounds like a description of your current setup, it is fixable.