How to Include One HTML File in Another

Using HTML 'includes' can greatly simplify management of your site

Almost all websites include elements of the design that are repeated across every page on the site, including the header area where the logo resides, the navigation menu, and the footer area.

Repeated elements on a site allow for consistency in the user experience. A visitor does not need to locate the navigation on every page because once they have found it, they know where it will be on other pages of the site they visit. 

HTML Files

How 'Includes' Makes Web Design More Efficient

Included content eliminates the need to edit every page of your site for this repeated content. Instead, you edit one file and then your entire site and every page in it gets the update.

Repeated Content in Content Management Systems

If your site uses a CMS, then it likely uses certain templates or themes are part of that software. Even if you custom-build these templates from scratch, the site still leverages this framework for the pages. As such, those CMS templates contain the areas of the site that are repeated across every page. You simply log in to the backend of the CMS and edit the necessary templates. All the pages of the site that use that template will be updated.

Even if you don't use a content management system for your site, you can still take advantage of included files. In HTML, includes help make managing these templated areas of your site easier.

What Are HTML 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 inserted into a full web page through programming. Most include files are those aforementioned items that are repeated on several pages of a website. For example:

  • Navigation
  • Copyright information
  • Header areas
  • Footer areas

Using Server Side Includes

Server Side Includes was first developed to allow web developers to “include” HTML documents inside other pages. Basically, a snippet that is found in one document is included into another when the page is run at the server and sent to the web browser.

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 code to include that HTML document's code in each page.

    <!--#include virtual="navigation.ssi" -->

    or
    <!--#include file="footer_text.html" -->

    The include directive accepts two parameters. Virtual assumes that the filename is relative to the document root of the website, whereas file accepts an absolute file path.

  3. Add this code on every page that you want to include the file.

Using PHP Includes

Like SSI, PHP 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, such as the navigation, to separate files. For example, your navigation section might be saved as navigation.html or navigation.ssi.

  2. Use the following PHP code to include that HTML in each page (substituting your file's path and filename between the quotation marks).

    <?php include("navigation.ssi"); ?>
  3. Add this same code on every page that you want to include the file.

JavaScript Includes

JavaScript is another way to include HTML within the pages of your site. This technique does not require server-level programming, but it’s a little more complicated — and it obviously works for a browser that allows for Javascript, which most do unless the user decides to disable it.

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.

  1. Upload that file to your website.

  2. Use a <script> element to include the JavaScript file on your pages:

    <script type="text/javascript" src="file.js"></script>
  3. Use that same code on every page that you want to include the file.

Other Include Methods

There are several other ways to include HTML on your pages. Some are more complicated than others, and many of them are actually outdated by today's standards.

  • CGI Includes: 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 Includes: If you build your site entirely in Adobe Flash, you can then use it to include elements of the site. This method is outdated and full Flash sites are a rarity on the Web these days.
  • Frames Include: Instead of using the same elements over and over across several pages, create a framed site where the frames are the duplicated portions of the site. However, except for the iframe element, frames are obsolete in HTML5.
  • Content Management Tools Includes: Templating is one of the major selling points of CMS and it is really how this work is handled on most sites today.