John Doe

John Doe is a minimal, single-file HTML template that builds a multi-page website with no JavaScript by using anchor fragments and the CSS :target selector to toggle visible sections.

What is John Doe?

John Doe is a static-site template distributed as a single HTML file; its demo runs on Neocities. The template takes a set of HTML sections, each with a unique id, and turns them into switchable "pages" controlled purely through URL fragments such as #about or #contact. No server processing, JavaScript, or build tools are involved: a plain text editor and a browser are enough to make and preview a site. The source repository carries 522 stars, and its declared topics are html, no-js, oldschool, and static-site.

Key Features

• Single-file site — the entire site is one .html file, so it can be copied, emailed, or uploaded to any static host without extra assets or configuration.
• Fragmented navigation — menu links use the #anchor suffix, and the :target CSS pseudo-class displays the matching <section> while hiding the rest, giving the feel of separate pages without reloads.
• No JavaScript — navigation, show/hide behavior, and page switching rely entirely on HTML and CSS, which also makes the template work where scripts are blocked.
• Simple page creation — adding a new page is two steps: put a <section> with a unique id into the file and add an <a href="#id"> link in the nav.
• Static-host ready — because the output is a plain HTML file, it runs on Neocities, GitHub Pages, and any other static file server unchanged.
• Old-school friendly — the template targets the oldschool static-site aesthetic, requiring no modern APIs or frameworks, and is suitable for retro personal pages.

Who is it for?

• Hobbyist webmasters — people running small personal sites on Neocities can get a clean one-page multi-section layout without learning a framework or build step.
• HTML/CSS beginners — learners can study how the :target selector works and can edit or extend the template while seeing immediate results in a browser.
• Prototype builders — developers who need a bare-bones clickable prototype can drop in sections and links to mock a multi-page flow in minutes.

What can you do with John Doe?

• Personal homepage: create sections for bio, blog, and contact, then navigate between them from a single nav bar under the same HTML file.
• Mini portfolio: present art, writing, or photography in separate sections that link from a gallery-style index.
• Class or workshop demos: show students that CSS alone can imitate multi-page behavior without JavaScript.

How does John Doe work?

1. Open the single HTML file in a text editor.
2. Add a <section> with a unique id (for example, id="contact").
3. Add an <a href="#contact"> link inside the navigation.
4. Load the file in a browser; clicking that link updates the URL fragment and the :target CSS rule makes that section visible.

Pros and cons

• Pros: zero JavaScript, zero dependencies, tiny file size, and no build step; works on any static host.
• Cons: all content lives in one document, so large sites yield one big HTML file; the browser must load every section's content up front, and each section shares a single global HTML document rather than separate server URLs.

FAQ

Does John Doe require JavaScript?

No. All page switching is handled by the CSS :target selector and standard anchor links, so the template runs without a single script tag.

How do I add a new page to the template?

Add a new <section> with a unique id attribute anywhere in the HTML, then add an <a href="#that-id"> link in the <nav>. The CSS automatically shows that section when the link is clicked.

Is John Doe a separate-page or one-page template?

It is a one-page template that simulates separate pages: every section lives in the same HTML file, and the URL fragment (the part after the #) changes to reflect the current section.

Where can I host a site built with John Doe?

Any static host will work, including Neocities (where the demo lives), GitHub Pages, Netlify Drop, or even a local file opened directly in a browser.