What does it do?
Lets look at an example: You have a default footer on all your pages [for example 100 pages]. Suddenly, you want to change your footer. Usually you would have to edit all the pages and change the footer manually. Not good. You can use includes to easily put the footer on all your pages which is read from one file. The beauty of it is when you want to change the footer, you only have to change one file! What an include does is that is includes a file into the web page be it on the server or on the client.

Include types
There are two type of includes: Server Side Includes (SSI) and Client Side Includes (CSI). To use SSI, you need a server that supports it. While almost all paid hosting supports it, there are many people who have personal homepages hosted on Geocities or Angelfire etc. that do not support SSI, so have to resort to CSI. (like me as this page is hosted by my ISP on my free space)

Server Side Includes
When you use SSI, in your html page you have put some special code for the server's software to recognize it e.g.:

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

 will include the file "footer.html" at that specific place on the page.
When the page is requested, the server will replace the include with the contents of the page, and then sends the page to the client who receives one complete page with the footer seamlessly attached.

Client Side Includes
These are a little bit different from SSI in that the including happens on the client side and the server just delivers the page as is. CSI relies on JavaScript. Lets look at how you would go about using CSI

With JavaScript we can reference an outside JavaScript file. E.g.:

<script src="footer.js"></script>

OK, so we can include an external JavaScript file in our pages. But we need someway of writing the HTML and not the JavaScript to the page. Here we use the document.write JavaScript method. We can use this to write plain HTML to the document. e.g.: Here is the contents of a sample footer.js file:

document.write("<br /><hr size='1' width='50%'>");
document.write("<p class='greytext' align='center'>");
document.write("[ E-Mail me at ");
document.write("<a href='mailto:gareth@w3.to' target='_top'>");
document.write("gareth@w3.to</a> ]<br />");
document.write("[ © 2000 Gareth Lennox ]</p>");

On every page, I have, at the bottom, this:

<script src="footer.js"></script>

You just need to make sure that there are no other double quotes ("), or make use of escape characters, in the string you want to write.

So on every page the browser gets the footer.js file and does what it says, writes the text to the document, and what results is the footer being written. If I ever want to change the footer, I just change the footer.js file and all the pages will be "updated". 

Another benefit of using a JavaScript file is that it is downloaded once, and used out of cache whenever it is requested, saving bandwidth. This does not happen with server side includes, as they are incorporated into the page, so they are downloaded on each page view.

Other uses
You can use CSI for many other things and not just a footer. You can include a table of contents on every page for example, or on my page, you can include a header as well.

Cons of using CSI
1. Non-JavaScript capable browsers will not show your includes as they will not understand the JavaScript.
2. If a visitor have JavaScript turned off, the includes will not be shown

Fortunately, most browsers in use today support JavaScript and not many users turn it off

Article written by Gareth Lennox on 21 February 2000. Updated 10 October 2001.