How to Include one HTML File in Another

Using HTML includes can greatly simplify management of your site.

Surfing the internet
Henrik Jonsson/E+/Getty Images

Go to any website and navigate from page to page and you will quickly realize that, while each of those pages may be different in many ways, they are also quite similar in others. Almost all websites include elements of the design that are repeated across every page on the site. Some examples of site elements that would be found across every page would be the header area where the logo resides, the navigation, 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. 

As someone tasked with managing a website, these repeated areas offer a challenge. What if you need to make a change to something in that area? For example, if your footer (which is on every page of the site) includes a copyright statement with a year, what happens when that year changes and you need to edit the date? Since that section is on every page, you now need to edit every single page of your site individually to make that change - or do you?  Included content can eliminate the need to have to edit every page of your site for this repeated content. Instead, you simply edit one file and your entire site and every page in it gets the update!

Let's look at a few ways you can add this functionality into your site and include one HTML file in a number of others.

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 will contain the areas of the site that are repeated across every page.

You simply login 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 have a content management system for your site, you can still take advantage of included files. In HTML, there are includes that can 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 pagesvia programming. Most include files are those aforementioned items that are repeated on multiple pages of a website. For example:

  • navigation
  • copyright information
  • header area

There is an advantage to having these repeated areas included on pages. Unfortunately, the process of inserting a file is not something that can happen with HTML alone, so you need to have some type of program or script that will add your include files into your web pages.

Using Server Side Includes

Server Side Includes, also known as SSI, were first developed to allow Web developers to “include” HTML documents inside other pages. Basically, a snippit 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 (substituting your file's path and filename between the quotation marks).
    {C}
  3. Add this code on every page that you want to include the file.

 

Using PHP

PHP is a server level scripting language. It can do a number of things, but one common use is to include HTML documents inside your pages, much the same way we juts covered with an SSI.

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).
    navigation.php"); ?>
  3. Add this same code on every page that you want to include the file.

Using ASP

Active Server Pages are another way to include HTML within your Web pages. Again, as long as your server supports ASP, you can use it to include files. 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.ssi.
  2. Use the include directive to insert that HTML in each page (substituting your file's path and filename between the quotation marks).
  3. Use that same code on every page that you want to include the 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 - and it obviously works for a browser that allows for Javascript, which most do unless the user decides to disable it.

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 website.
  3. Use a <script> element to include the JavaScript file on your pages.
  4. 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
    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. This method is extremely outdated and full Flash sites are a rarity on the Web these days.
  • 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 and it is really how this is handled on most sites today. While the other methods covered in this article will work in many cases, the reality is that any site of substance is likely going to be built on a CMS these days.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 1/5/17.