It is entirely possible to build a whole website out of nothing but generic containers and styled text. It will look fine to a sighted mouse user and be nearly unusable to everyone else. Semantic HTML — using the element that actually describes the content, like a button for a button and a nav for navigation — is the difference, and it usually costs nothing but choosing the right tag.

The payoff is broad: assistive technology understands the page, keyboard users can move through it, search engines parse it better, and other developers read it faster. Few decisions give so much for so little.

Screen readers navigate by structure

A screen reader user does not scroll top to bottom; they jump — heading to heading, landmark to landmark, link to link. That navigation is built entirely on the elements you chose. Real headings let them skim the outline of a page. Landmark elements like header, nav, main and footer let them leap straight to the content. A page of undifferentiated containers offers none of these handholds, so the user is left crawling through everything.

The same applies to controls. A real button is focusable, announced as a button, and triggers on both click and the keyboard by default. A generic element styled to look like a button does none of that unless you painstakingly reimplement it — and most reimplementations are incomplete. Using the native element gives you correct behaviour for free.

The elements that carry meaning

Reach for headings to express hierarchy, in order, without skipping levels for visual effect. Use lists for lists, so their length and structure are announced. Use nav for groups of navigation links, main for the primary content, and article or section to group related content. Use button for actions and anchor links for navigation to a destination — the two are not interchangeable.

For forms, associate every input with a real label. That single habit makes fields announceable, clickable by their label, and far easier to use for everyone. None of this requires extra libraries; it is HTML doing the job it was designed to do.

It helps machines and humans too

Search engines lean on the same structure to understand what a page is about, so semantic markup quietly supports discoverability. And months later, the developer who opens your code — possibly you — reads a page of meaningful elements far faster than a wall of identical containers with class names doing all the explaining.

The rule of thumb is small and reliable: before you style a generic container to act like something, check whether a native element already is that thing. Most of the time one exists, and using it is the accessible, durable, cheaper choice.