How can I include one HTML file inside another HTML file?

General Discussions
1

I have two HTML files, a.html and b.html. In JSF, I can use <ui:include src="b.xhtml" /> to include one file in another. How can I achieve a similar HTML include in plain .html files without using JSF?

2

Using <iframe> (quick and simple)

Hey! I’ve used this trick a lot :sweat_smile:. The easiest way to include one HTML file inside another is with an <iframe>:

<!-- a.html -->
<h1>Main Page</h1>
<iframe src="b.html" width="100%" height="300px" style="border:none;"></iframe>

b.html will appear inside a.html.

It’s simple and works in plain HTML without any frameworks.

Caveat: It behaves like a separate window, CSS and scripts are isolated from the parent page.

3

If you want the content embedded directly (not in a separate frame), I usually use JavaScript to load it dynamically:

<!-- a.html -->
<div id="include-here"></div>

<script>
fetch('b.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('include-here').innerHTML = data;
  });
</script>

This inserts the HTML from b.html into the div.

Works well for plain HTML projects and allows CSS/scripts from b.html to affect the page.

I often use this approach when building small static sites or templates.

4

Server-side includes (if you’re using a web server)

If your project is hosted on a server (like Apache or Nginx), you can use server-side includes (SSI):

<!-- a.html -->
<!--#include virtual="b.html" -->

The server replaces the include directive with the content of b.html before sending the page.

Very clean, no JavaScript needed.

I use this for static websites that still need modular HTML.