Good HTML is a contract: to browsers, to assistive tech, and to search engines. Semantic structure is not decoration; it’s how your content is understood.
1. Heading hierarchy is mandatory
- Use one
<h1>per page - Don’t skip levels (h2 then h4)
- Headings describe sections, not styling
2. Use landmark elements
<header>, <nav>, <main>, <footer> help screen readers and improve maintainability.
3. Forms: labels and constraints
Every input needs a label. Placeholder text is not a label. Use aria-describedby for help text and error messaging.
4. Buttons vs links
Links navigate. Buttons perform an action. If it goes to another page, it should be an anchor.
5. Images need real alt text
Alt text is for meaning. If an image is decorative, set empty alt (alt="") so it’s ignored by assistive tech.
Semantic HTML is one of the cheapest quality upgrades you can make: it improves accessibility, SEO, and long-term maintenance simultaneously.