How do I include one HTML file in a another with HTML includes.

I recently used HTML (Server Side) Includes to convert an old iFrame site into a table-less iframe-less site. Here’s a quick bit on how to do this.

You can place the following code where you’d like the file to appear.

If the file you want to include is in the same directory, include with “file” parameter.

<!--#include file="header.htm" -->

When the file you want to include is in a different directory, you can include with “virtual”.

<!--#include virtual="includes/header.htm" -->

Note: Make sure there is a single space after the quoted file name, there is no equivalent space in the beginning of the line.

Why didn’t that work?

If the site does not render for you in your working/production environment you’ll need to check a few things. Here are two things you can test.</p>

Is Apache running on your server?

Try uploading an html file to your hosting space with the following code.

<!--#config timefmt="%A" --> <!--#echo var="DATE_LOCAL" -->

Load the page in your browser, if you see the date & time, you are running apache.

Do you have Apache running on your local machine?

You should install something like MAMP.

Does your server require .shtml files?

Try renaming the included file extension to .shtml and change the include code to .shtml

Is your Apache configured to parse for Server Side Includes?

You may have to manually configure Apache to look for SSI, you can do this by editing/adding a .htaccess file.

If your root folder doesn’t have a .htaccess file, you’ll need to create one with a blank text file. Here’s what I did:

AddType text/html .html .htm
AddHandler server-parsed .html .htm

DirectoryIndex index.htm

First two lines configures .htaccess to parse .html and .htm for SSI – if you’re using .shtml files you’ll want to change the code to reflect that. The third line sets my website default page to be index.htm – you may have to do the same.

Just a warning that changing Apache to parse all of your html files will have some effect on your site performance. In addition, editing the .htaccess can do some funny things to your server if not configured properly, so be sure to test in a sub-directory and be ready to remove the file right away since it might cause a server error. Good Luck!

Back to Blog