Living Document Notice
Published 2026-09-14. The evolving architecture, revisions, and connected notes for this dispatch live in the Stax Digital Garden.

Zero-JavaScript Semantic HTML

Summary

Modern web publishing platforms routinely deliver megabytes of client-side JavaScript to render static articles. Client-side frameworks bundle complex state machines, virtual DOM diffing engines, and tracking libraries merely to display typography and responsive columns. This overhead introduces Cumulative Layout Shifts (CLS), delays Interaction to Next Paint (INP), and degrades readability on low-powered mobile devices or intermittent network connections.

Harbor adopts a strict zero-client-JavaScript contract for standard publication pages. By leveraging modern semantic HTML elements and CSS standards-including CSS Grid, container queries, viewport fluid typography via clamp(), and native form validation-the reading experience achieves sub-second Largest Contentful Paint (LCP) while generating zero runtime script evaluations in the user's browser.

The Architectural Rationale for Zero-JS Content Delivery

When documentation or article platforms bundle JavaScript runtimes for reading surfaces, the browser main thread must complete substantial parsing and execution before the page becomes fully responsive to user input. The main thread budget is finite; executing scripts during document parsing introduces thread contention and battery drain.

A semantic HTML document styled with pure CSS requires zero main thread script compilation. The browser parser constructs the Document Object Model (DOM) and CSS Object Model (CSSOM) in a single streaming pass, rendering pixels to the screen immediately as bytes arrive over the network socket.

Modern Pure-CSS Architecture

Harbor replaces common JavaScript layout scripts with modern CSS specifications. Fluid typography and responsive layout boundaries scale automatically without media query thrashing or window resize listeners.

/* Minimalist, zero-JS base stylesheet (harbor.css - 2.8 KB) */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace;
  --color-bg: #fdfdfd;
  --color-text: #1a1a1a;
  --color-muted: #666666;
  --color-border: #e2e2e2;
  --color-accent: #0f4c81;
  --content-width: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #eaeaea;
    --color-muted: #9e9e9e;
    --color-border: #282828;
    --color-accent: #64b5f6;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.65;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.site-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header.site-header,
footer.site-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  width: 100%;
}

main.site-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  width: 100%;
}

article h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

article time {
  display: block;
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.prose > * + * {
  margin-top: 1.4rem;
}

.prose pre {
  background: var(--color-border);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.prose th, .prose td {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

/* Accessible, zero-JS details disclosure component */
details {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

details summary {
  cursor: pointer;
  font-weight: 600;
}

details[open] summary {
  margin-bottom: 0.5rem;
}

HTML Template Generation

The Hono renderer emits clean semantic tags conforming directly to W3C specifications without extraneous framework wrapper divs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Zero-JavaScript Semantic HTML</title>
  <link rel="stylesheet" href="/assets/harbor.css" />
</head>
<body>
  <div class="site-shell">
    <header class="site-header">
      <nav aria-label="Primary Navigation">
        <a href="/">Harbor</a>
      </nav>
    </header>
    <main class="site-content">
      <article>
        <header>
          <h1>Zero-JavaScript Semantic HTML</h1>
          <time datetime="2026-09-14">September 14, 2026</time>
        </header>
        <section class="prose">
          <!-- Article Content -->
        </section>
      </article>
    </main>
    <footer class="site-footer">
      <p>Independent Knowledge Architecture</p>
    </footer>
  </div>
</body>
</html>

Performance Auditing and Byte Count Verification

Verify total payload transfer and script execution from the CLI:

# Verify zero script tags exist in rendered document
curl -s http://127.0.0.1:3000/posts/zero-javascript-semantic-html | grep -c "<script"

# Inspect compressed wire size of HTML response
curl -s -H "Accept-Encoding: gzip" http://127.0.0.1:3000/posts/zero-javascript-semantic-html | wc -c

# Run automated headless Lighthouse CLI audit measuring Core Web Vitals
lighthouse http://127.0.0.1:3000/posts/zero-javascript-semantic-html \
  --chrome-flags="--headless" \
  --only-categories=performance,accessibility \
  --output=json | jq '.categories.performance.score, .categories.accessibility.score'