Question: Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:

```
Page 1 : click here for page 2

```

and

```
Page 2 : click here for page 1

```

Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!

Answer: 
[Screen Rec](https://a.pomf.cat/kyyeea.webm)

You could use [Colker](https://www.reddit.com/r/web_design/comments/6ta3b1/a_single_html_file_which_uses_url_parameters_to/), which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.

Page contents are stored in a `java-script array`, and the "`page`" (eg: ?`page=pagename`) URL parameter determines which page content to serve.
Solution 1
==========

One solution for this, not requiring any JavaScript, is simply to create a single page in which the multiple pages are simply regular content that is separated by a lot of white space. They can be wrapped into `div` containers, and an inline style sheet can endow them with the margin:

```
<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...

<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
     alternative is to use this for the main part of the page also! -->
</div>

<div class="subpage">
</div>

<div class="subpage">
</div>

```

You get the picture. Each "page" is just a section followed by a whopping amount of vertical space so that the next one doesn't show.

I'm using this trick to add "disambiguation navigation links" into a large document (more than 430 pages long in its letter-sized PDF form), which I would greatly prefer to keep as a single `.html` file. I emphasize that this is not a web site, but a document.

When the user clicks on a key word hyperlink in the document for which there are multiple possible topics associated with word, the user is taken a small navigation menu presenting several topic choices. This menu appears at top of what looks like a blank browser window, and so effectively looks like a page.

The only clue that the menu isn't a separate page is the state of the browser's vertical scroll bar, which is largely irrelevant in this navigation use case. If the user notices that, and starts scrolling around, the whole ruse is revealed, at which point the user will smile and appreciate not having been required to unpack a `.zip` file full of little pages and go hunting for the `index.html`.

Solution 2
==========

It's actually possible to embed a HTML page within HTML. It can be done using the somewhat obscure `data:` URL in the `href` attribute. As a simple test, try sticking this somewhere in a HTML page:

```
<a href="data:text/html;charset=utf-8,<h3>FOO</h3>">blah</a>

```

In Firefox, I get a "blah" hyperlink, which navigates to a page showing the **FOO** heading. (Note that I don't have a fully formed HTML page here, just a HTML snippet; it's just a hello-world example).

The downside of this technique is that the entire target page is in the URL, which is stuffed into the browser's address input box.

If it is large, it could run into some issues, perhaps browser-specific; I don't have much experience with it.

Another disadvantage is that the entire HTML has to be properly escaped so that it can appear as the argument of the `href` attribute. Obviously, it cannot contain a plain double quote character anywhere.

A third disadvantage is that each such link has to replicates the `data:` material, since it isn't semantically a link at all, but a copy and paste embedding. It's not an attractive solution if the page-to-be-embeddded is large, and there are to be numerous links to it.