Single HTML file website

This is a really cool thing, that is not complex at all: the whole site packed in a single HTML file. Pages are wrapped into <section> HTML tag, each with its own ID and linked with inner links, anchors. By default, all sections are hidden, but they become visible with the help of CSS :target selector.

<section id="home">
...
</section>

<section id="page">
...
</section>

<section id="blog"> 
...        
</section>

The whole “code” for the website to work fits into three CSS rules:

section {
	...
	display: none;
	position: absolute;
	top: 0;
	min-height: 100vh;
	width: 100%;
}

section:target { /* Show section */
	display: block;
}

section#home { /* Show #home by default */
	display: block;
}

It will even work with a sane number of images when using loading="lazy" to instruct the browser not to load images unless they are to become visible. When such “website” is meant to be distributed via any kinds of file sharing and accessed locally, both CSS and images can be embedded into HTML to make it truly single HTML file easy to move around.