A Whole Website in a Single HTML File

Single-File Websites: A Clever CSS Trick

There’s a fascinating demo making the rounds: a complete multi-page site that exists as one solitary HTML file. Clicking around feels perfectly normal, but the navigation never triggers a new request — it simply toggles which parts of the page are visible.

The trick relies on the :target pseudo-class, which has been part of CSS for years. Usually it highlights the element you’ve jumped to via an anchor link. Here it does something bolder.

<section id="home">
  <!-- home content goes here -->
</section>
<section id="about">
  <!-- about page goes here -->
</section>

Each content block is a <section> tucked away with CSS:

section { display: none; }

The main menu’s links point to those sections as anchors:

<a href="#home">Home</a>
<a href="#about">About</a>

Clicking a link then shows only that section:

section:target { display: block; }

It’s an elegant, lightweight approach that imitates a conventional site with zero JavaScript and no page reloads.

See the demo for yourself →