taste-code-craft

A designed page is a designed codebase. The DOM is the first layout you write — structure it like one.

1. SEMANTIC HTML (The DOM Is Design)

• One <h1> per page; heading levels descend without skipping (h1 → h2 → h3, never h2 after a bare h4).
• Use the element that means the thing: <nav>, <main>, <section aria-labelledby>, <figure>, <time>, <button> (not a <div> with a click handler), <a href> for navigation.
• Lists are <ul>/<ol> — a row of features is a list, not five <div>s.
• Every <img> has alt (empty alt="" only when decorative) and explicit width/height to prevent layout shift.
• Labels: every <input> has a visible <label> (or aria-labelledby); never placeholder as the only label.
• If the page has no <main>, one <section> without a heading, or a clickable <div>, it fails.

2. TOKENS OVER LITERALS (The Design System in Code)