Scrapbook: HTML Essays

What is an HTML Essay?

A single page website, usually hosted on a dedicated domain or subdomain, that serves to publish a single essay. This page may heavily use rich media, diagrams, charts, or even interactive JavaScript elements, but it is an essay first and foremost, built purposefully for a narrow scope of information delivery.

HTML Essay Examples

Important Note: Just because I link to an essay here doesn’t necessarily mean I agree entirely with it’s content. I’m simply linking examples of HTML essays that I feel represent the format and execute on it well.


Images and Visuals


Rich and Interactive Media


Design Languages

Starting Points for Layout

tufte-css — A CSS template for creating pages that look like statistician Edward Tufte’s handout style. A great starting point for those who want their essay to have a typeset look.

latex.css — A CSS template for creating pages that look like a LaTeX document. Definitely a great idea for anything math related, as it has built-in support for theorems, definitions, proofs, lemmas, and more.

Referi — A great starting point for those who want a minimal, yet robust way to create a lightweight webpage. It features an 8-column grid system that allows content to be laid out with <cell> tags.

Raster Simple Grid System — A grid system similar to referi, but a bit more fleshed-out and focused a bit more on visual aesthetic and less on minimal resource usage. Built by Rasmus Andersson, the same guy that made the Inter typeface.

Remember that with any of these starting points, just changing the font and colors is enough to give it an all new visual identity, so don’t feel trapped into a particular style just because you picked a certain CSS template to start with. For example, my professional site (as of August 2023) is actually based on tufte-css, but you wouldn’t think it. A majority of what I did was simply changing the colorscheme, and changing the font from ET Book to Inter.

Font Resources and Pairings


Note Status:


There are no notes linking to this note.