Single-file HTML is underrated: lessons from shipping 50+ one-page sites

In a recent perspective piece, a developer argues that single-file HTML pages often go overlooked despite their potential. They recount shipping over 50 one-page sites and finding the simplicity of a single HTML file to be the most underrated web medium. Here are the key takeaways:

1. A single HTML file enforces a focused approach. With no components folder or build step, every element must justify its place. This forces concise writing and clear structure, often resulting in better content than complex frameworks allow.

2. Sharing via URL vastly improves distribution. Removing the setup and installation barriers makes content much more accessible. A simple link is easier to share than a repository or build, leading to 10 times more readers for documents, reports and explainers.

3. Portability is a major advantage. HTML files work offline, won't break over time, and don't rely on any platform. Pages created a decade ago still render perfectly today, a stark contrast to framework-based projects that can become obsolete.

4. Single-file isn't a one-size-fits-all solution. It breaks down when databases are needed, when there are many page types, or when multiple people edit simultaneously. The medium is best for static documents and demos, not complex applications. Recognizing when it's appropriate is crucial.

The author provides practical advice:

- Inline CSS and JS, but watch the file weight. Base64 images are convenient but can quickly bloat the file size. Keep the total under ~500KB, splitting images out if needed.

- Design for mobile first. Over 60% of page views come from mobile devices. If horizontal scrolling is required on small viewports, the layout fails.

- Include print styles. Five lines of CSS for print mode can transform a webpage into a genuinely useful document. This simple step is often overlooked.

- Use semantic HTML. Proper headings, paragraphs and alt text enhance SEO without any framework. The web was designed to be readable, and simple HTML achieves that goal.

The takeaway is to reconsider the default assumption that every project needs a framework. Before scaffolding a new site, ask if a well-crafted HTML page could suffice. In many cases, the answer is yes, and it will save time and ship faster.