Techno WeBlog

An include is a section of HTML that isn’t a full HTML document by itself. Instead, it is a portion of another page that can be included in complete Web pages using programming.

Unfortunately, this is not something that is supported by HTML, so you need to have some type of program or script to add your include files into your Web pages.

Server Side Includes
The first one is to use Server Side Includes (SSI). With SSI you can put instructions in the HTML files that are executed by the http server. When executed, the server replaces the text of the SSI instruction with the resulting text. The exact syntax of SSI instructions might differ for each webserver, but it looks something like this:

<!–#include file=”footer.html” –>
<!–#include virtual=”../quote.html” –>

Because the server must do some extra processing on a file that contains SSI, it will result in a slight loss in performance. For that reason most servers will not parse every file unless configured to do so. So the server must be instructed to scan a file for SSI. Usually this is done by changing the extension of the HTML file to .shtml or .sht.

include virtual and include file do almost the same thing. The difference is that include virtual takes a URL-style path, which is what you probably expect. include virtual can also execute CGI programs, if your web server supports that, and include their output. include file takes a file-system path, and cannot execute CGI programs. Both also accept relative paths, so for a simple case like the above they work the same. If you don’t understand the difference between web paths and file system paths, use include virtual.

JavaScript
A second solution involves JavaScript. With the latest browsers you can include scripts from external files. The contents must be JavaScript instructions, but by including the HTML you need inside a JavaScript function, you can overcome this restriction. First create a javascript file, for example footer.js (the extension must be .js). In this file you store the HTML you want to reuse:

var sText = ”
sText += ‘put the html you want to include in lines’
sText += ‘like these.’
sText += ‘<a href=”about.html>about us</a>’
document.write(sText )

Now you must add an instruction to read this file in your html files that use the file. You must put this tag at the position where you want the text to be used:

<script language=”javascript” src=”footer.js”>

The advantage of using SSI instead of JavaScript, is that SSI is handled on the webserver. This means that it will work with every browser. The other solution will only work if the browser supports JavaScript.

Filed under: HTML, JavaScript