How to Include a Separate File on a Webpage

Once you have learned the basics of website structure, there are many good reasons you might want to include a separate file on a webpage. The most important is to make a standard format across a website that is easier to change and maintain. To do this, separate header and footer and navigation files can be created that contain information that will be the same on every page of the website. It can then be included on each page of the website so that when a change must be made it can be done within a single file.

Another handy use for an include is that it can be set up to place image ads or even links in various appropriate webpages in a site. Using java script it can even allow such ads to be placed across several websites.

The process is fairly simple for a site using SSI or Server Side Includes (which isn't seen so much anymore - pages may have the suffix .shtml) just use something like the code below in the appropriate place in the HTML on your webpage:

<!--#include virtual="../util/header.txt" -->

PHP has taken over as the most popular way to do single-site includes. It is handy because other coding can be included on them. PHP is also a server side operation. It occurs on the machine where the website resides. The web browser has no idea that an include was performed. It only sees the whole document once it is sent over the internet. A php include would look something like this:

<?php include("util/header.php"); ?>

The question marks at the beginning and end indicate that this is a PHP script. This line of code will only work on file types that are designated on the server to use PHP. This means that the file name should end with .php or you can make an adjustment in your .htaccess file to make htm or shtml files work as if they were php. Use the following entry:

AddType application/x-httpd-php .html

Finally, you can use java script. There are disadvantages to using java script to do an include. Primarily, it requires some jockeying to make other java scripts operate successfully within a file included using java. (Using SSI and PHP you can simply put the java script in the external file.) The advantage to using java script is that you can use it in several different websites all at once. Which is impossible in SSI and problematic on some servers in PHP. To use java script to include another file, first create a file with a .js extension. In the file use a write command to contain the html you wish included. It will look something like this:

document.write("My information conveys the message that \"Human history becomes more and more a race between education and catastrophe.\" More information.");

Note that if you want to use quotation marks other than at the beginning or end of the write command, then it must be proceeded by a "back\slash". Since HTML is littered with quote marks, you will have to go over this carefully before uploading the js file.

Now you can use the code that calls the java script write command on your page:

<script type="text/javascript" src="includes/copyright.js"> </script>

There are many ways to include files in an html document. The key is to choose the best one for the purpose at hand.

Use an Ampersand Converter to Make Amazon Code W3C Compliant


What is it with directories?

LinkToThisPage Button

In-Depth Information

Valid XHTML 1.0 Transitional

InDepthInfo - In-depth Information You Want to Know


Visit a random article: Eleventy-One

Contact Us | Privacy Statement