1. Technology
Send to a Friend via Email

How Do I Include One HTML File in Another?

Creating Pages that are the Same, Automatically

By

Surfing the internet
Henrik Jonsson/E+/Getty Images

Once you’ve surfed the web for more than a day, you’ll notice that most websites have a theme or template for their site design that is repeated across every page on the site. On this site, there are several elements that are repeated in this way, including the header portion of the page and the navigation.

But, when I put up a new article every week, I don’t have to write the HTML to add those standard elements. All I write is the article. The rest of the template is built by a content management tool on About. But even if you don’t have access to a content management system, there are many ways you can manage your site without having to edit every page by hand. These are called includes.

What Are Includes?

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.

Most include files are items that are repeated on multiple pages of a website without changing, like:

  • navigation
  • copyright information
  • contact notices

Server Side Includes

SSI, or Server Side Includes, were first developed to allow web developers to “include” HTML documents inside other pages. If your web server supports SSI, it’s easy to create templates for your website. It is also sometimes called SHTML because files that use it are sometimes given an extension of .shtml instead of .html.

SSI is included on most web servers, but you may have to enable it in order to get it working. If you don't know if your server supports SSI, contact your hosting provider.

Here is an example of how you can use SSI to include a snippet of HTML in all your web pages:

  1. Save the HTML for the common elements of your site as separate files. For example, your navigation section might be saved as navigation.html or navigation.ssi.
  2. Use the following SSI tag to include that HTML in each page.
    <!--#include virtual="/ssi/navigation.ssi" -->
  3. Use that same code on every page that you want to include the file.

Make sure to change the higlighted file name to the name and path to your include file.

PHP

PHP is a server level scripting language. It can do many things, but one popular use is to include HTML documents inside your pages, much the same as SSI. Like SSI, this is a server level technology. If you are not sure if you have PHP functionality on your website contact your hosting provider.

Here is a simple PHP script you can use to include a snippet of HTML on any PHP-enabled web page:

  1. Save the HTML for the common elements of your site to separate files. For example, your navigation section might be saved as navigation.html or navigation.php.
  2. Use the following PHP code to include that HTML in each page.
    <?php require($DOCUMENT_ROOT . "navigation.php"); ?>
  3. Use that same code on every page that you want to include the file.

Make sure to change the higlighted file name to the name and path to your include file.

ASP

Active Server Pages are another way to include HTML within your web pages. Again, as long as your server supports ASP, you can include files using it. If you're not sure if your server supports ASP, contact your hosting provider.

Here is how to include a snippet of HTML with ASP:

  1. Save the HTML for the common elements of your site to separate files. For example, your navigation section might be saved as navigation.html or navigation.asp.
  2. Use the include directive to include that HTML in each page.
    <!--#include file="navigation.asp"-->
  3. Use that same code on every page that you want to include the file.

Make sure to change the higlighted file name to the name and path to your include file.

JavaScript

JavaScript is another way to include HTML within the pages of your site. This has the advantage of not requiring server-level programming. But it’s a little more complicated than the server-level include methods.

Here is how you can include a snippet of HTML using JavaScript:

  1. Save the HTML for the common elements of your site to a JavaScript file. Any HTML written in this file, must be printed to the screen with the document.write function.
  2. Upload that file to your webiste.
  3. Use a SCRIPT element to include the JavaScript file on your pages.
    <script type="text/javascript" src="navigation.js"> </script>
  4. Use that same code on every page that you want to include the file.

Make sure to change the higlighted file name to the name and path to your include file.

Other Include Methods

There are many other ways to include HTML on your pages. Some are more complicated than others.

  • CGI
    You can use Perl or another programming language to create your pages and then include whatever you want, either as require files or by reading them in manually.
  • Flash
    If you want to build your site entirely in Flash, you can then use it to include elements of the site.
  • Frames
    Instead of using the same elements over and over in multiple pages, you can create a framed site where the frames are the duplicated portions of the site. Bear in mind that, except for the IFRAME element, frames are obsolete in HTML5.
  • Content Management Tools
    Templating is one of the major selling points of CMS. Only the managers have access to change the template portions of the site, while content developers change the dynamic sections.

Latest Articles on Web Design / HTML

Need More Help with HTML or Web Design?

I am available online to help you with your HTML or web design problems. Come join our community of web designers on Google+ and ask a question, join in a discussion, get help with a design, or just get inspired to do great web designs.

©2014 About.com. All rights reserved.