All HTML guides
Foundations7 min read
How to Use Progressive Enhancement in HTML
Ship a useful document first, then add styling and interaction without making the core task depend on them.
The short version
The baseline experience should complete the core task with the fewest assumptions.
01
Begin with a working HTML path
A form can submit to a server route before JavaScript adds inline validation. Navigation can use links before a client router makes transitions faster. Disclosure content can use details and summary before a custom accordion is considered.
html
<form action="/search" method="get">
<label for="query">Search guides</label>
<input id="query" name="q" type="search">
<button type="submit">Search</button>
</form>02
Enhance from capability, not device guesses
Feature detection asks whether the browser supports the capability you need. It is more robust than guessing from a user-agent string. CSS supports queries and small JavaScript checks can activate optional behavior.
03
Keep failure graceful
- Links still navigate if a script fails.
- Forms preserve values after a server error.
- Content remains readable before fonts load.
- Motion is optional and respects user preferences.
- Offline or slow states explain what is happening.