HTML
Overview
HTML is the semantic foundation of the web application and the first layer of accessibility.
Why It Matters
Good HTML improves screen reader support, form usability, SEO, and browser behavior.
Core Concepts
- Use the right element for the job.
- Semantic structure communicates meaning.
- Forms and labels are part of the contract.
Mental Models
If you can replace custom markup with semantic HTML, usually should.
Best Practices
- Use headings in order.
- Associate labels and controls.
- Use buttons, not clickable divs.
Common Mistakes
- Using divs for everything.
- Skipping labels or alt text.
- Breaking the document outline.
Trade-offs
Custom markup can look flexible, but semantic elements are usually cheaper to maintain and more accessible.
Decision Framework
| Need | Prefer |
|---|---|
| Navigation | <nav> |
| Action | <button> |
| Input | <label> + control |
Examples
<label for="email">Email</label>
<input id="email" type="email" />Checklists
- Are interactive elements semantic?
- Do headings reflect the page structure?
- Are labels, alt text, and form relationships correct?
Senior Engineer Notes
Senior engineers treat HTML as an API for browsers and assistive tech, not as disposable scaffolding.