How To Build An Age Gate In HTML: A Simple 18+ Warning Page

Your site is nearly ready. The photos are yours, the copy is clean, and then you read the rule that stops you: before any page is shown, visitors have to see a warning that the site is for adults only and agree to enter.

You don't need a plugin or a developer, and it works the same on any host, ours included. An age gate in HTML is one extra file and a few lines of script pasted into your other pages, and you can test it in a private window before anyone else sees it.

Below are the wording, the full code, a ten-minute walkthrough, and the part most tutorials skip: what a click-through warning page can't do.

If you haven't checked your content against the rules yet, start with what an adult content policy actually allows. A warning page is one of five conditions, not a pass for everything else.

What Is An Age Gate, And What Does It Actually Do?

An age gate is a page that stands in front of a website, says who the site is for, and asks the visitor to confirm their age before they go further. It's a notice and a confirmation. It is not a check.

Think of a sign on a door, not someone at the door asking for ID. It can't tell whether the person agreeing is honest.

What Should Your Warning Page Say?

Your warning page should say three things in plain words: the site is for adults only, the visitor confirms they're 18 or older (or the age of majority where they live, if that's higher), and they agree to view it. Then it gives them two clear choices, enter or leave.

Here's wording you can use as it stands:

This website is for adults only. It contains material intended only for adults. By entering, you confirm that you are 18 or older, or the age of majority where you live if that is higher, and that you agree to view it.

Two buttons follow: "I am 18 or older - Enter" and "Leave".

Keep it short and calm: no photos, no teaser text, nothing from the pages behind it. Your stage name or brand name at the top is fine.

The Code: An Age Gate In HTML And A Short Script

The method uses two pieces: a warning page at index.html, and a short guard at the top of every other page that sends anyone who hasn't confirmed back to it. Your real home page moves to home.html.

Step 1: Make index.html The Warning Page

Rename your current index.html to home.html. Then create a new index.html with this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Adults Only - Please Confirm</title>
  <style>
    body { margin: 0; min-height: 100vh; display: grid; place-items: center;
           padding: 24px; font-family: system-ui, sans-serif;
           background: #111; color: #f5f5f5; }
    .box { max-width: 440px; text-align: center; line-height: 1.5; }
    .actions { display: flex; gap: 12px; justify-content: center;
               margin-top: 24px; flex-wrap: wrap; }
    .actions button, .actions a { padding: 12px 20px; border-radius: 8px;
                                  font-size: 16px; text-decoration: none; }
    .actions button { background: #f5f5f5; color: #111; border: 0; cursor: pointer; }
    .actions a { color: #f5f5f5; border: 1px solid #f5f5f5; }
  </style>
</head>
<body>
  <main class="box">
    <h1>This website is for adults only</h1>
    <p>It contains material intended only for adults. By entering, you confirm
       that you are 18 or older, or the age of majority where you live if that
       is higher, and that you agree to view it.</p>
    <div class="actions">
      <button id="enter" type="button">I am 18 or older - Enter</button>
      <a href="https://www.google.com">Leave</a>
    </div>
  </main>
  <script>
    document.getElementById("enter").addEventListener("click", function () {
      // Remember the answer for this tab only.
      sessionStorage.setItem("adults-ok", "yes");
      // Go back to the page they asked for, but only if it is on this site.
      var next = new URLSearchParams(location.search).get("next") || "";
      var safe = /^\/[A-Za-z0-9._~\/-]*$/.test(next) && next.indexOf("//") !== 0;
      location.href = safe ? next : "/home.html";
    });
  </script>
</body>
</html>

Change the colours if you like, not the wording or the script.

Step 2: Add The Guard To Every Other Page

Paste this as the very first thing inside the <head> of home.html and every other page on the site, above your stylesheet and everything else:

<script>
  if (sessionStorage.getItem("adults-ok") !== "yes") {
    location.replace("/?next=" + encodeURIComponent(location.pathname));
  }
</script>

It has to sit at the top, inline, so the browser runs it before drawing anything and the page never flashes up first. A shared file works too (linking a JavaScript file to your HTML shows how), but for five lines, inline wins.

Step 3: Point Your Home Links At home.html

Any "Home" link, and the logo, should go to /home.html, not /, which is now the warning page.

How The Pieces Fit Together

The two scripts share one stored answer. sessionStorage is a small store the browser keeps for one tab, cleared when that tab or the browser is closed (MDN's reference on sessionStorage has the exact rules). Enter saves one word there. The guard looks for it, and if it's missing, sends the visitor to the warning page with a note of where they were going.

Nothing leaves the visitor's browser.

The next check is the part I'd never skip. It only accepts a plain path on your own site: letters, numbers, dots, dashes and slashes, starting with one slash. So it refuses an address like //other-site.com or /\other-site.com, and nobody can use your warning page to bounce visitors to a site of their choosing.

Walkthrough: A Four-Page Portfolio In About Ten Minutes

Say a model has a four-page portfolio in one folder: index.html (the home page), about.html, gallery.html and contact.html.

1. Rename the home page (1 minute). index.html becomes home.html.
2. Create the warning page (2 minutes). A new index.html with the code from Step 1, with her brand name added above the heading.
3. Add the guard (3 minutes). The five-line script goes at the top of the <head> in home.html, about.html, gallery.html and contact.html. Four pastes.
4. Fix the Home links (1 minute). The nav on all four pages pointed at / or index.html. Both become /home.html.
5. Upload the folder (1 minute). Same as any static site. If you've never done it, how to host an HTML file walks through it.
6. Test it in a private window (2 minutes). This is the step that catches mistakes.

A private window starts empty, like a first-time visitor. Check four things:

• Visit the site's main address. You should see the warning page.
• Type the address of gallery.html directly. You should land on the warning page, and clicking Enter should take you to the gallery, not the home page.
• Click around all four pages. You shouldn't see the warning again until you close the window.
• Close the private window, open a new one and visit about.html. The warning should be back.

If a page loads without the warning, its guard is missing or too low in the <head>.

What Can't A Warning Page Do?

A click-through warning page can't verify anyone's age, and it can't make content allowed that wasn't already. The full list:

• Anyone can click Enter. A 15-year-old and a 50-year-old get the same result.
• JavaScript off means no gate. A visitor with scripts switched off can type an inner page's address and read it. The warning page's Enter button won't work for them either.
• It guards pages, not files. A direct link to a photo file opens the photo with no warning in front of it.
• It's not identity or age verification. No ID, no face estimate, no record of who confirmed.
• Search engines mostly see the warning page. Expect that for an adults-only site, and don't expect your inner pages to rank.
• Explicit content behind a gate is still explicit. A gate or a password doesn't change what the material is.

That's why the content behind the gate has to stay suggestive at most.

There's a legal side too: some places require real age verification for pornographic sites. The UK's Online Safety Act duties, enforced by Ofcom since July 2025, are one example, and a number of US states have similar laws. Explicit sites aren't allowed on OxyPages at all, so this matters most if you host elsewhere: there, a click-through is not enough for explicit material. I can't tell you what applies where you live, and nothing here is legal advice. Check the law where you are and where your visitors are, and ask a local lawyer or a local sex worker support organisation if you're unsure.

Warning Page Vs Password Protection Vs Real Age Verification

Password protection is not a warning page: it keeps out every adult without the password and shows no notice.

WordPress age-gate plugins are a fair choice if your site already runs on WordPress. They do what the code above does without touching a file.

Paid verification services are the only option here that checks age at all. They're built for sites the law treats as pornographic, and if that's your site, this host is the wrong host.

One small gap to close: your 404 page. If you've made your own, keep it plain, with no photos, or give it the same guard, which uses absolute paths and works at any address. Adding a custom 404 page takes a few minutes.

What To Do Next

Set up the gate before the site goes public, not after.

The verdict: on our platform or any other host, a warning page at index.html and a guard on every page is all a non-explicit personal brand site needs, and it stores nothing about your visitors.

The warning page is one part of a bigger build. The adult personal brand website guide covers the rest, from privacy to copy.

If your site promotes paid services, it's commercial, and that needs a paid plan. Compare the plans that allow commercial sites before you upload. You can build and test the gate on a free account first, then upgrade before you share the site.