HTML Boilerplate


I probably create dozens of HTML documents each month, usually for experiments or minimal test cases. Consequently, I’ve long maintained a carefully crafted HTML template, included below, which I typically reduce to only retain pieces that are strictly necessary (e.g. removing the external style sheet or .stack utility).

Occasionally I refer to A Minimal HTML5 Document for the bare essentials (e.g. when constructing data URIs).

My shell history always includes the following command for easy access:

$ cp /path/to/snippets/boilerplate.html /tmp/dev/testcase.html #testcase

envsubst might be used for basic templating:

$ TITLE="hello world" CONTENT="lorem ipsum" envsubst < template.html
<title>hello world</title>
<h1>hello world</h1>
<main>lorem ipsum</main>

<!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8">
    <title>Test Case</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./styles/main.css">
*::after {
    box-sizing: border-box;

:root {
    --h-size: 60ch;

    /* modular scale-ish; cf. */
    --spacing: 0.5rem;
    --spacing-sm1: calc(var(--spacing) * 0.667);
    --spacing-sm2: calc(var(--spacing) * 0.444);
    --spacing-sm3: calc(var(--spacing) * 0.296);
    --spacing-lg1: calc(var(--spacing) * 1.5);
    --spacing-lg2: calc(var(--spacing) * 2.25);
    --spacing-lg3: calc(var(--spacing) * 3.375);

body {
    max-width: calc(var(--h-size) + 2 * var(--spacing));
    margin: 1rem auto;
    padding-inline: var(--spacing);
    font-family: system-ui, sans-serif;
    line-height: 1.5;

button {
    font: inherit;

.stack > * {
    margin-block: 0;

    & + * {
        margin-block-start: var(--spacing);

<body class="stack">
    <h1>Test Case</h1>
    <p>lorem ipsum dolor sit amet</p>

    <script type="module">
// …