Including HTML Files in an HTML File

Let’s say that you are building a site with several different HTML pages.  You want them all to have the same template and menu structure.  This would require a lot of duplicated code in each page of the site.  Wouldn’t it be a lot nicer to have that duplicate code in files that can be included in your pages?  There actually is a way to do this, but it may require that you change options for Server Side Includes (SSI) on your server.  Those changes to the server will be covered in future posts.  For now, let’s look at how to do the include.

The following line will include the file test2.html into an HTML file.

<!--#include file="test2.html" -->

To test the concept of including one HTML file inside another, I wrote the following page, test.html:

<html>
<body>
<p>Before the include.</p>
<!--#include file="test2.html" -->
<p>After the include.</p>
</body>
</html>

test2.html contains the following:

<h1>Hello, World!</h1>

If your server is set up to accept SSI directives, you should see the following:

Before the include.

Hello, World!

After the include.

If you view the source from your browser, it will look like this:

<html>
<body>
<p>Before the include.</p>
<h1>Hello, World!</h1>

<p>After the include.</p>
</body>
</html>

The code from the included file will have been integrated on the server side into the code sent to the client.

If the server has not been correctly configured, you will not see “Hello, World!” in the browser.  So what do you do if this is the case?  I will cover that in the next two posts: Turning on SSI in IIS on a Windows Server and Turning on SSI in Apache on a Linux Server.

This entry was posted in HTML and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *