The PE Philosophy Start with HTML
Understand why HTML-first ensures universal access.
The PE Philosophy Start with HTML is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Defining Progressive Enhancement
Progressive Enhancement (PE) is the practice of building a usable experience with HTML alone, then layering CSS for presentation and JavaScript for interactivity. Each layer enhances the previous; none is required for the page to work.
Why Start with HTML?
HTML is the most resilient layer. It parses partially when malformed, ignores tags it does not understand, and works without scripts or stylesheets. By contrast, a missing CSS file degrades appearance and a broken JS bundle can leave a page unusable.
The Three Layers
Content (HTML), Presentation (CSS), Behavior (JS). A submit button is a real <button type="submit"> — the form posts even if JS fails. CSS makes it pretty; JS may intercept the submit for AJAX, but the underlying HTML guarantees the action.
<form action="/checkout" method="post">
<input name="email" type="email" required>
<button type="submit">Continue</button>
</form>Resilience to Failure
Networks drop. Scripts fail to load. Users disable JS. Slow connections time out before bundles arrive. A PE page degrades gracefully under each of these: the user can still read, navigate and submit using HTML alone.
Performance Wins
Pages that render usable HTML before scripts load have faster First Contentful Paint, lower Time to Interactive, and better Core Web Vitals scores. The browser displays meaningful content without waiting for JS to bootstrap.
Accessibility Wins
Real HTML elements come with accessibility built in. <button> is keyboard-activatable; <input type="email"> gets the right virtual keyboard; <a> is announced as a link by screen readers. PE produces accessible defaults for free.
SEO Wins
Search engine crawlers prefer HTML they can parse without executing JavaScript. PE-built pages get indexed completely with no JS execution; SPA-only pages depend on the crawler's scripting support and often miss content.
PE vs SPA
Single-Page Apps render everything client-side and break completely when JS fails. PE is the opposite: the server emits complete HTML, and JS adds enhancements like prefetching, optimistic updates, or in-place editing without ever owning the basic functionality.
Frameworks That Encourage PE
Remix, Next.js Server Components, SvelteKit and Astro all bias toward server-rendered HTML with progressive JS enhancement. Choosing such a framework makes PE the path of least resistance.
When PE is Hard
Highly interactive UIs (collaborative editors, drawing apps, real-time games) cannot meaningfully exist without JS. PE's "no-JS fallback" for such apps may be a static read-only mode — better than nothing but inevitably reduced. Be honest about the trade-off.
The Mantra
"Make it work, then make it pretty, then make it fast." Build the HTML form first; verify it works with curl. Add CSS for layout. Add JS for in-place validation, optimistic updates, or AJAX submission. Each layer is optional; the result composes a great experience for everyone.
Knowledge Check
What is the core promise of Progressive Enhancement?
Summary
Progressive Enhancement starts with semantic HTML that works without CSS or JS, then layers CSS for presentation and JS for interactivity. Each layer is optional; the page degrades gracefully under failures. PE wins on performance, accessibility, SEO and resilience — at the cost of more upfront design work for highly interactive apps.
Frequently asked questions
Is the “The PE Philosophy Start with HTML” lesson free?
Yes — the full text of “The PE Philosophy Start with HTML” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “The PE Philosophy Start with HTML”?
Understand why HTML-first ensures universal access. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The PE Philosophy Start with HTML” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The PE Philosophy Start with HTML
- Feature Detection vs Browser Sniffing
- Graceful Degradation vs Progressive Enhancement
- Building a PE Accordion