Make a website with a single HTML file

#html #css #webdev #javascript

There is a clever way to create a whole website with just a single HTML, some CSS, and no JS. Did you know?

Step 1

Create an empty HTML5 website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Step 2

Add some anchors and sections with ids for the pages:

...
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#blog">Blog</a>
        <a href="#about">About</a>
    </nav>

    <main>
        <section id="home">
            <h1>Home</h1>
            <p>This is the homepage!</p>
        </section>
        <section id="blog">
            <h1>My Blog</h1>
        </section>
        <section id="about">
            <h1>About Me</h1>
        </section>
    </main>
</body>

Step 3

Add some CSS to toggle the pages:

<head>
...
    <style>
        section {
            display: none;
        }

        section:target {
            display: block;
        }
    </style>
</head>

Step 4

There is no step 4. All that left is to customize it.

And that's it. You have a website ready in just a few steps, no JS used, no complex framework, just an HTML file, and a text editor. The magic behind this is by utilizing the anchor links and the :target pseudo selector to switch between the pages without the help of any JS.

The :target pseudo selector matches when the hash in the URL and the id of an element are the same.

Reference: CSS-Tricks

Top comments (7)

crayoncode • Jan 31 '21

Tha is for showing us that trick. Didn't know the :target pseudo-class.
Browser support is also perfect:
developer.mozilla.org/en-US/docs/W...

Georgey • Jan 31 '21

Dayumm

Jon Randy 🎖️ • Feb 1 '21 • Edited

The fact this even needs to be written is every that is wrong with web development these days - :target has been around almost 20 years

Khang • Feb 1 '21

Yes, you're definitely right, it has. But the fact that it is old does not mean everybody knows :)
And consider SPA was not the thing back then, I doubt :target was ever used like this. So it's good that we all know a new trick up our sleeves.

Jon Randy 🎖️ • Feb 1 '21

I meant that everyone seems to be going straight to learning stuff like React and using it for EVERYTHING. It seems rare these days that new devs actually spend time on learning the basics, and creating things for themselves WITHOUT using libraries. People reach for the convenient "off the shelf" solutions without realising they may be using a sledgehammer to crack a nut. This is awful for many reasons, and just contributes to JS bloat, excessive tooling, and general over-engineering of the simplest websites.