Building Websites With Many Little HTML Pages: A Practical Approach

Tired of the JavaScript-heavy complexity that plagues modern web development, turning simple content sites into performance nightmares? It’s time we revisited a fundamental truth: the web was built on HTML pages.

The Core Problem: Over-Reliance on JavaScript for Basic Interactions

We’ve become so accustomed to Single-Page Applications (SPAs) and their intricate client-side routing that we often overlook a simpler, more robust approach. For many content-driven websites – blogs, documentation sites, e-commerce catalogs – the need for full-blown JavaScript frameworks to manage navigation, accordions, or even modal pop-ups is overkill. This over-reliance leads to:

• Bloated JavaScript bundles: Slower initial load times and increased resource consumption.
• Complex state management: Difficult to debug and maintain.
• SEO challenges: SPAs can sometimes struggle with indexing compared to traditional Multi-Page Applications (MPAs).
• Accessibility concerns: Poorly implemented JavaScript can break assistive technologies.

Technical Breakdown: Leveraging Modern Browser Features for Classic UX

The “Lots of Little HTML Pages” (LLMS) philosophy isn’t a step backward; it’s a pragmatic embrace of web fundamentals amplified by modern browser capabilities. The game-changer here is the Cross-Document View Transitions API. This API allows for seamless, app-like visual transitions between distinct HTML documents without requiring JavaScript to manage the DOM.

Enabling View Transitions

To enable basic cross-document transitions, you simply add this to your CSS on both the source and destination pages:

@view-transition {
  navigation: auto;
}

This provides a default cross-fade effect. For more sophisticated animations, you can leverage view-transition-name on shared elements and style pseudo-elements. For instance, to animate a site header:

.main-header {
  view-transition-name: site-header;
}

/* Styles for the old header fading out */
::view-transition-old(site-header) {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}
::view-transition-new(site-header) {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

While CSS handles most of the heavy lifting, JavaScript can be used for fine-grained control, such as managing browser history with pageswap and pagereveal events.

Tools: This approach shines when paired with Static Site Generators (SSGs) like Astro, Hugo, Eleventy, or Next.js (in static export mode). These tools are built to efficiently manage and build numerous HTML files, turning them into a high-performance, maintainable codebase.

Ecosystem & Alternatives: MPA vs. SPA Revisited

This LLMS approach squarely falls into the Multi-Page Application (MPA) paradigm. Unlike SPAs, MPAs offer inherent advantages for content-rich websites:

• Superior SEO: Each page is a distinct, indexable entity.
• Scalability: Easily handles vast amounts of content without performance degradation.
• Reduced Dependencies: Less reliance on heavy JavaScript frameworks.

The sentiment on platforms like Hacker News and Reddit often mirrors this appreciation for simplicity, with many viewing this as a smart return to web fundamentals, enhanced by modern browser APIs.

The Critical Verdict: Simplicity, Performance, and Maintainability Win

The “Lots of Little HTML Pages” strategy, powered by the Cross-Document View Transitions API, is not merely a nostalgic throwback; it’s a genuinely powerful and practical approach for a significant class of websites. It effectively balances modern user experience expectations – smooth transitions, app-like feel – with the inherent strengths of the web: SEO, accessibility, and progressive enhancement.

When to use it: Content-heavy sites, documentation platforms, blogs, and straightforward e-commerce stores.

When to avoid it: Projects demanding highly dynamic, real-time interfaces with extensive client-side state management and frequent in-page updates (e.g., complex dashboards, real-time collaborative editors). For these, SPAs or more complex hybrid solutions are still appropriate.

For most content-focused websites, embracing LLMS with modern tooling is a path to a simpler, more performant, and far more maintainable future. It’s time to stop reinventing the wheel with excessive JavaScript and start building on the solid foundation of HTML.