Make a website with a single HTML file

Khang - Jan 31 '21 -

- Dev Community

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