CHAPTER 1 OF 5

1. Start with HTML

Your goal: choose an element that already provides the meaning and behavior you need.

Use the browser’s built-in controls

Use a button for an action, an a with a destination for a link, and associated labels for form inputs. A native element can provide semantics and behavior that a generic container does not.

<button type="button">Save changes</button>

Giving a div role="button" does not make it focusable or provide Enter and Space behavior. Recreating those features adds responsibilities. Prefer the native control when it fits.

Sometimes HTML already handles the whole pattern

<details> <summary>Workshop details</summary> <p>Bring a laptop if you have one.</p> </details>