3 Ways to Include One HTML File in another HTML File

Sometimes it makes sense to create one html file that will be used in many other html files.  For instance, you might have some code that you would like to use as a header on each page of your web site.  Instead of typing this code out on each page of your site, you could just create a separate file with this code and name it header.html. Also, header.html doesn’t have to contain a complete html file structure with <html> </html>, <head> </head> and <body> </body> elements; rather, it just needs to follow the html standards as part of the file in which it will be included. In example, you could create a file called heading.html with the following contents.

<body>
<h1> Welcome to my site </h1>

Then, type the include statement just after the head element in the file that you wish to include heading.html in, and there will be no problems rendering the site. 

Now, I will describe three ways to include this file named heading.html. The first method will use php (Note: use must have php installed and enabled on your server for this to work).  To include this file using php, change the name of the file from heading.html to heading.php. Also, the file that has the include statement must also be saved with the .php extension.  Finally, at the location where you would like the code to appear type:

<?php include('heading.php'); ?>

The next two methods are virtually the same;  they just involve using different file extensions.  As noted before, you should make sure these technologies are enabled on your server before using them on your site. In the next to methods of performing a server side include, if you want to include a file called heading.html, this file can keep the .html file extension. Then, the file that you would like to include heading.html in would need to be saved with a .asp or .shtml file extension. The code for the include statement is below.

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

In conclusion, you now know three ways to perform a server side include. Using include statements decreases file size, and it saves work if future editing is needed.

Tags: , , , , , ,

Leave a comment