Semantic HTML First

Semantic HTML is interface infrastructure. Native elements carry keyboard support, form participation, disabled behaviour, and accessibility semantics without a second implementation.

Defaults

1. Start with the native element that matches the interaction.
2. Use ARIA to refine native semantics, not to rebuild them on div/span.
3. Prefer explicit composition over magic asChild polymorphism when it obscures the real element.
4. Style states with native pseudo-classes (:disabled, :checked, :open, :invalid) before parallel data-* state systems.
5. If a library primitive exists, verify it still renders a real semantic element in the DOM.

Prefer / Reject