Avoiding Repetitive Markup (aka using include files)

Posted on Posted in Teaching, Techie 1 Comment

A student in my ENGL/DTC 356 class, came to office hours one day and asked a good question that wasn’t even related to an assignment—it was just something she wanted to know how to do because she could see a need for doing it. I note this because what she asked is something that people who are actually in web development as a profession seem not to understand—how to make it so she didn’t have to use the same HTML over and over again for things like menus or headers or footers, because what if she wanted to change something? Wouldn’t she have to make those same changes over and over? Yes. Yes, you would. And that is annoying and a waste of time. So, kudos to Marci for asking that sort of question.

I scribbled some things on paper and sent her along her way, but that wasn’t a very thorough explanation. Hopefully this post will be a better one.

I’m going to talk briefly about:

  • a server-side include (SSI) solution
  • a server-side scripting (such as PHP, ASP, JSP) solution
  • a client-side solution (JavaScript)
  • a client-side solution (IFRAME)

These are in no particular order, especially given that my preferred method of doing this is a PHP-based server side solution. Also, this is not comprehensive information; it will be enough to get you started and should be enough to get you to ask a smart question if you need to.

Prepare the Content for Inclusion
The following information assumes that you have some static HTML that you want to include/reuse across pages. In other words, pretend you sliced a chunk of HTML out of your pages; that’s the content you want to include/reuse. So, while your includING pages will have a fully-formed set of of HTML tags in the document—like <html></html>, <head></head> and so on, the slice you want to include should be just that slice.

For the sake of argument, let’s say you have the following base file:
<html>
<head>
<title>Some Title</title>
</head>
<body>
<h1>Some Heading</h1>
<div>STUFF TO INCLUDE</div>
</body>
</html>

The file you want to include, let’s call it include.html, should just have the following in it:
<div>STUFF TO INCLUDE</div>

Server Side Include (SSI) Solution
Before considering this solution, you must first determine if your hosting provider allows SSIs. This information is typically found in the description of the hosting package. You can also login to tyour hosting account’s control panel and look for an icon/option called “Apache Handlers.” If you click on that option and there’s something in the “System Defined Handlers” area that says “.shtml server-parsed” or “.html server-parsed” then you’re good to go. [Special note to students in my class: LunarPages and Daily Razor both allow SSI. A Small Orange’s Tiny package does not.]

If you are using SSI, the most important bit of info is that all the pages using a SSI must have the .shtml extension, if that is the way the server is set up. In other words, when you look in the “Apache Handlers” area and note the extension ahead of the “server-parsed” indicator, that is the extension you must use with your page-doing-the-including—not the page you want to include, but the page doing the including. The .shtml extension is a default. You might see .html used for server-parsed. If one doesn’t work, try the other.

The basic syntax for a SSI is:
<!--#include virtual="include.html" -->

I am using “virtual” here so you can take advantage of the URL-style pathing. If the file you want to include is in your web server document root, you would use virtual=”/include.html”. If it is in a directory called “includes” within the document root, you would use virtual=”/includes/include.html”. If it is in the same directory as the page using it, then you can stick with virtual=”include.html”.

You could also use :
<!--#include file="include.html" -->

This would work if the include file is in the same directory as the page using it, but otherwise you will have to use full filesystem pathing, e.g. /home/username/public_html/include.html. This is useful if you have your include files in a directory above the document root—usable but not browseable.

A complete example for page including another page called include.html, in the same directory as that page, is:
<html>
<head>
<title>Some Title</title>
</head>
<body>
<h1>Some Heading</h1>
<!--#include virtual="include.html" -->
</body>
</html>

When a user requests this page from the server, the slice of HTML stored in the include.html file will replace the line of code requesting it.

Server-Side Scripting (such as PHP, ASP, JSP) Solution
Much like the SSI solution, this solution requires that your system is set up to interpret your server-side language and, more importantly, it knows when to do that. In the SSI example, note that you had to ensure that your files were given a certain extension (.shtml). In the case of using PHP, ASP, or JSP to include file contents within another file, again you must use a file extenion on the includING page that matches the language you are using. If your hosting provider is set up to parse PHP, a default file extension for PHP-parsed files is .php. For ASP it’s .asp, and for JSP it is .jsp. Handy, that standard. The rest of this solution is based on using PHP—because I do, and also: duh. If you want to use ASP or JSP the information is conceptually similar although the specifics are different. Use the google, it’s your friend.

Anyway, you can override the default extension for PHP and tell your server that you’d like it to parse all files with the .html extension as PHP. To do that, use your control panel to add an Apache Handler (add x-httpd-php .html) or create an .htaccess file with the following line in it, and upload that to the document root of your web site.

AddHandler x-httpd-php .html

If you don’t know what the stuff above means, ask. The bottom line is that if you want content from one file to be included in the other and the including file doesn’t have a .php extension, you have to tell your server to do something differently than it expects to do.

When it’s time to include the file, the syntax is simple:

<?php include("include.html"); ?>

The pathing follows filesystem pathing; the above include would work if the include file is in the same directory as the page using it. If it is not, then use the full filesystem pathname, e.g. /home/username/public_html/include.html.

A complete example for page including another page called include.html, in the same directory as that page (and using PHP), is:
<html>
<head>
<title>Some Title</title>
</head>
<body>
<h1>Some Heading</h1>
<?php include("include.html"); ?>
</body>
</html>

When a user requests this page from the server, the slice of HTML stored in the include.html file will replace the line of code requesting it. If your included file contained actual PHP code (and not just static HTML), it would be processed as well. [To students in my class: your WordPress blogs are built with a series of pages that include other pages, all through/using PHP.]

Client-Side Solution Using JavaScript
I am a firm believer of not doing things on the client side when you can do them on the server side. That being said, if you are in a situation in which you absolutely cannot do anything on the server side, you do have some client side options. Using JavaScript to include HTML content is one of those options. There are a few different ways to do this, but I will show you a simple method that does not require a lot of “coding”.

It does not matter what file extension your includING file uses, as it will only be plain ol’ HTML with no need to interact with anythinng on the server side that requires the file extension to indicate exactly what has to happen on that end. In other words, your includING file can be called samplepage.html and you can move on. But the file you want to include? It should have a .js extension. In this example, we’ll use include.js as the file name.

In the include.js file, you will need to wrap every line of your HTML in the document.write() method. For example:

document.write('<ul>');
document.write('<li>I am a menu item</li>');
document.write('<li>I am a second menu item</li>');
document.write('<li>I am a third menu item</li>');
document.write('</ul>');

In the previous examples, you’ve seen how to include a file called include.html into a base file. In this instance, that file-to-be-included should be called something like include.js (the .js extension is the important thing). Then, your base file would include that file in an example like below.
<html>
<head>
<title>Some Title</title>
</head>
<body>
<h1>Some Heading</h1>
<script type="text/javascript" src="include.js"></script>
</body>
</html>

The pathing follows URL-type pathing; the above include would work if the include file is in the same directory as the page using it. If it is not, then use the pathname based on the web server document root, e.g. /somedirectory/include.html.

Client-Side Solution Using <IFRAME>
A client-side solution that doesn’t use JavaScript is to use the “inline frame” (IFRAME). The disadvantage to this solution is that you have to specify a height and width for the frame; if your design is fluid, this could pose a problem for you. But, its usage is straightforward.

For now, I am assuming the file you want to include is called include.html and contains the following line of code:
<div>STUFF TO INCLUDE</div>

In the file that is doing the includING, use IFRAME code such as the following; it will create an inline frame that is 450 pixels wide and 50 pixels high:

<iframe src="include.html" width="450" height="50" frameborder="0"></iframe>

Again, the pathing follows URL-type pathing; the above include would work if the include file is in the same directory as the page using it. If it is not, then use the pathname based on the web server document root, e.g. /somedirectory/include.html.

A complete example for page including another page called include.html, in the same directory as that page and using an IFRAME, is:
<html>
<head>
<title>Some Title</title>
</head>
<body>
<h1>Some Heading</h1>
<iframe src="include.html" width="450" height="50" frameborder="0"></iframe>
</body>
</html>

Whew! There you have it—four simple ways to avoid repetitive markup when making a web site. Quite frankly, it’s not as important which method you choose (although I will just mention again that I prefer the server-side scripting method) but, in the planning stages, knowing that you want to do this in the first place!

Tagged with:

1 Comment on “Avoiding Repetitive Markup (aka using include files)”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.