Semantic HTML, explained without the jargon

This is one of those topics that looks small until it costs you something. Here is semantic HTML without the vocabulary that usually surrounds it.

Code gets read far more often than it gets written, and usually by someone with less context than the author had. Anything you cannot measure here, you are deciding by taste, which is fine as long as everyone knows it.

The short version

The right element gives you behaviour and accessibility for free. It is worth being explicit about, because assumptions differ quietly. Doing this properly once is usually cheaper than doing it approximately three times.

Why people complicate it

Most of the confusion comes from tooling rather than from the idea itself. The reasoning matters more than the rule, because the rule has exceptions.

A div with a click handler is not a button. It is worth being explicit about, because assumptions differ quietly. Assume whoever inherits this will have half your context and none of your patience.

Turning this into a decision

Semantic markup is the cheapest accessibility work available. It is worth being explicit about, because assumptions differ quietly. Budget a little time for it every quarter and it never becomes a project of its own.

In practice

The question is rarely whether something can be built, but what it costs to keep running afterwards. Three things worth confirming about semantic HTML before you move on:

• Someone can say what the current setup is without going to look
• A div with a click handler is not a button — and you know whether that is true here
• There is a way to tell whether the last change to this helped

The point is not perfection, it is knowing which of these you have consciously chosen to skip.