Technical House
WEB

HTML semantics that survive redesigns

Why landmarks, headings, and forms matter more than fancy class names when you rebuild a UI.

Published · Updated · 9 min read

Structure first, skin later

A redesign usually changes CSS and components — not the meaning of the page. If your markup already exposes nav, main, article, and labeled forms, the rebuild stays cheaper and more accessible.

Prefer one h1 per view, sequential heading levels, and lists for lists. Screen readers and SEO both reward this discipline.

Forms without mystery

Every input needs a visible label (or an aria-label when the design truly cannot show one). Error text should be associated with the field, not dumped at the top of the page alone.

Use the correct type and autocomplete attributes. Browsers help users fill passwords, emails, and addresses when you let them.

Checklist before you ship

Can you navigate the page with keyboard only? Do images have meaningful alt (or empty alt if decorative)? Are interactive elements real buttons and links — not divs with click handlers?

If you answer no, fix semantics before adding another animation library.

#html#a11y#foundation

Never miss a drop

Get new guides on web development and AI, Prompt Lab tips, videos, downloads and exclusive deals — straight to your inbox. No spam, unsubscribe anytime.