January 28th, 2021
I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that… the whole website is contained within a single HTML file.
What about clicking the navigation links, you ask? Each link merely shows and hides certain parts of the HTML.
<section id="home"> <!-- home content goes here --> </section> <section id="about"> <!-- about page goes here --> </section>
Each <section>
is hidden with CSS:
section { display: none; }
Each link in the main navigation points to an anchor on the page:
<a href="#home">Home</a> <a href="#about">About</a>
And once you click a link, the <section>
for that particular link is displayed via:
section:target { display: block; }
See that :target
pseudo selector? That’s the magic! Sure, it’s been around for years, but this is a clever way to use it for sure. Most times, it’s used to highlight the anchor on the page once an anchor link to it has been clicked. That’s a handy way to help the user know where they’ve just jumped to.
Anyway, using :target
like this is super smart stuff! It ends up looking like just a regular website when you click around:
The original post A Whole Website in a Single HTML File.