HTML that means something

Every element in HTML has a meaning, and using the right one gives you accessibility, search visibility and keyboard support without writing any extra code.

A page built entirely from div elements works visually and fails everywhere else. A screen reader cannot tell a navigation bar from a footer. A search engine cannot see the structure. Keyboard users cannot skip to the main content.

The elements that carry meaning are few: header, nav, main, article, section, aside, footer. One main per page. Headings run in order, one h1 describing the page, then h2 for each section, and h3 nested under those. Skipping from h1 to h4 because the smaller size looked better is the most common structural mistake on the web, and size is what CSS is for.

Buttons and links are not interchangeable. A link goes somewhere. A button does something. A div with a click handler does neither: it cannot be reached by keyboard, it is not announced, and it will not respond to Enter. This is the single commonest accessibility failure in real projects.

Forms. Every input needs a label tied to it, which also makes the label clickable, doubling the tap area on a phone. Choose the right input type, because on mobile it changes the keyboard that appears, and an email keyboard for an email field is a real improvement for a real user.

Images need alt text that says what the image conveys. A decorative image takes an empty alt so it is skipped rather than described.