Progressive Enhancement
Definition
The order is the whole idea. Content and structure go in the markup, so a page with no styles and no scripts still shows its words, its headings and its links, provided the markup is semantic HTML. Presentation goes in CSS, which fails quietly whenever a property is unsupported. Behaviour goes in JavaScript, and only after a feature test says the browser can handle it. There is a blunt way to check the result: turn JavaScript off and reload. A page built this way loses its live filtering and its animations and keeps every word and every link.
Why It Matters
Not everyone gets your JavaScript. A crawler reading the first pass, a connection that drops one file, a corporate proxy stripping scripts, an extension blocking the CDN the script came from — in each case the HTML arrives and the enhancement does not. A page whose content lives only in JavaScript shows an empty box to all of them. On a static site the stakes are plainer still: if your prices, your dates or your address are written into the page by a script, they are not in the served HTML, and the search engine indexing that URL may never see them.
How It Works
Start with real markup — links that are anchor tags with real href values, a form that posts to a working endpoint, content in the document rather than in a JSON blob. Add a stylesheet, which the browser applies as far as it understands it and ignores where it does not. Then add scripts that find the elements already there and upgrade them: intercept the form and send it with fetch instead of navigating, turn a list of links into tabs, swap a page reload for an in-place update. Each enhancement should confirm that what it needs exists and leave the original behaviour alone when it does not. Built in that order, a script that fails to load leaves a plain working page rather than a broken one.
Real-World Example
A restaurant menu at corner-kitchen.99helpers.site is published as plain HTML, a heading per course, with a script that adds filters for vegetarian and gluten-free dishes. On the day the filter script fails to load, the page is still a complete menu in a sensible order, slightly longer to read and entirely usable. The same content built as a client-rendered app would have shown an empty screen, and the search result for it would have been blank too.
Common Mistakes
- ✕Treating it as a rule against JavaScript — it is a rule about order, and a heavily interactive page can be built this way without losing anything
- ✕Writing essential text into the page at runtime — it is invisible to anything that reads the served HTML, including link previews
- ✕Building a fake link out of a div and a click handler — it cannot be opened in a new tab, reached with the keyboard or followed by a crawler
Related Terms
Graceful Degradation
Graceful degradation means a page built for modern browsers still does its job in an older one, with the clever parts simply absent rather than broken. Less capable, not unusable.
Fetch API
The Fetch API is the browser's built-in way for JavaScript to request something over the network without reloading the page. You call fetch with a URL and get back a promise that settles into a response.
View Source
View source shows the raw HTML the server sent for a page, before any JavaScript has run. On a client-rendered page that can be almost empty even though the page in front of you looks full.
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
Search Engine Indexing
Indexing is the step where a search engine stores a fetched page so it can be returned for queries. It happens after crawling, and it does not follow automatically from it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →