Custom Digital Solutions
.HT Home   |   License   |   Template Tool   |   Support   |   Forum

Make Life Easy by Separating Web Layout From Content

Rapid Content Deployment With .HT Files (Html Template Files)

by Dr. Andrew Burt , CEO, TechSoft

Creative Commons License
Download .ZIP

HTML and CSS templates are a great way to make a good looking site, but they can be a pain down the road. The problem is that they don't, by nature, separate the theme from the content of the page: If you create ten or a hundred pages on your site, then decide to change the theme or navigation, add Google analytics, or whatnot — and you have to edit ten or a hundred pages. Quite a chore.

There are many template engines and other approaches that separate dynamic content from fixed or "static" web pages, or try to separate layout from content, but they don't completely separate the layout of the site (the look & feel you see looking at an empty CSS template page) from your unique content on each page. Each of those solutions requires custom modifications or "hooks" in your HTML to connect your content with the template's look & feel or otherwise shackles your content to their way of doing things.

No matter where you get your layout and design from, unless your site runs software like WordPress, you have to merge the theme with your content in such a way that you can't easily keep them separate. (And the WordPress approach has limitations as well, such as not working with off-the-shelf CSS templates -- it needs those "hooks" I mentioned.) That means you can't easily...

  • merge CGI or PERL dynamic output with a template
  • change the template if it's copied in dozens hundreds, or thousands of .html files
  • let outsiders upload content that uses your look, but without them having to use the template or without you writing code or installing some complex software package
  • prevent outside content uploaders from changing your look
  • get program-generated content to use your look without editing every program to dump out the right HTML

I faced all these challenges on the various sites I run. Here's how I made my life simpler with ".ht" files.

In brief, .ht files completely separate your per-page content from your theme/layout -- with no hooks inside your HTML content or templates. Just upload a content file and go. This approach also easily meshes with PERL, PHP, ASP, etc.

Notice the shape of a web page

Many (if not most) web pages are made of content wrapped in the middle of unchanging top, side, and bottom material (header, footer, side navigation, etc.).

Visually, in other words, we have something like this. The parts that are the same from page to page are in blue, the unique content for each page is shown in red:

...Header stuff... navigation menu...
left side navigation, etc... same on every page... Your content...
...Lorem ipsum dolor sit amet...
...stuff that's different on every page ...
maybe right side stuff... same on every page ...
...Footer stuff...

Your typical .html file looks like, then, like this:

... <img src="top-header.jpg"> & other top header stuff... navigation menu...
...left side navigation...
...same on every page...
Top Stuff

...Lorem ipsum dolor sit amet...
...your real content here...
...stuff that's different on every page...

Your Stuff
...more stuff that's the same on every page...
...maybe some right side links...
...bottom footer stuff...
Bottom Stuff

That is, when it's stored in the .html file, many pages have their "real content" sandwiched between unchanging top and bottom material. (This is the kind of output you get from using a template in Dreamweaver. The problem is, once it's in the HTML file, you can't undo it. If you've inherited a site and don't have the original input files, you're stuck. Or if you want to easily incorporate your theme into a CGI or PHP script you pick up off the web, it isn't simple.)

If you had the web server automatically spit out the top and bottom stuff, you could simply create a file that contained only your "real" stuff. That's what a .ht file is! You set up the layout once, split it into two parts (top & bottom bread slices of that sandwich), then never have to touch it again. Every .ht file you create will draw from that layout. If you change the layout, every .ht file immediately picks it up without you lifting a finger.

(Note that it doesn't really matter if the left side matter is in the "top" file and the right side matter in the "bottom". Just find the point in your template where your content goes, and split it right there into top/bottom files.)

The First Step

Take the template for your web site and customize it as usual for your navigation links and site name. Then view this as HTML, and find the place where you would insert your unique page content -- where you'd see "Lorem ipsum..." above. Copy everything above that point to a file called "top". This would include all the header material and perhaps some left-side navigation. Next copy everything after your content -- the footer, maybe right-side column material -- into a file called "bottom". Upload top & bottom to your web server. (No extension, just "top" and "bottom".)

You're just left with your unique content for that page. In my ideal, I want to place that -- and only that -- into a file and have the web server automatically wrap it inside the top and bottom bread of the sandwich.

That's what I created, and called a ".ht" file. Inside of, for example,, you would find only the specific content, the "middle stuff." The web server does the rest. When a user visits, the web server sends out "top", your middle "good stuff" from, then "bottom". You can now concentrate on creating the per-page content and not have to mess with the look&feel of the surrounding template again. This makes using free web templates a snap. Just split them into top/bottom files and place all your content into a bunch of .ht files.

To aid in this process, I created a web tool to do the splitting of a page containing "CONTENT HERE" (or a string of your choice). It's here if you want to use it.

Want to change your web template to something else? Just replace the top & bottom files and you don't have to touch any of your content pages.

How To Do It

You can accomplish this in two ways:

  1. Set up your server to handle the ".ht" file type; or
  2. Approximate it using server side includes (like ".shtml" files or .asp, .php, or .cgi);

Adding Real .ht Files to your Server

It's not difficult to add the .ht file type to a web server. Here are directions for adding it to an Apache server.

1. Add this to your httpd.conf file (or .htaccess file [*]):

(Note that if you want to use some suffix other than ".ht", like ".foo", change it in that first line above.)

[*] Note you can place this in a .htaccess file, which is useful if you have a hosted site where you don't have access to the httpd.conf file.

2. Assuming you want "" in a directory to be a default file like index.html usually is, add "" to the end of the DirectoryIndex line in your httpd.conf or .htaccess file, such as:

3. Save the following into encapsulator.cgi and place it in your cgi-bin directory (or wherever you pointed to it from httpd.conf; it needn't be named ".cgi" nor put in a cgi-bin directory but I've done so since people quickly grasp the idea of .cgi files):

Restart your server and you're all set! Make a top/bottom file and a file to see how it works.

(Note that as an added bonus this version looks in the current directory for "top" & "bottom" then in a specified root directory if not present in the current directory. I usually keep top/bottom linked in each directory anyway, but it's a useful feature.)

(Adding the .ht extension to Microsoft IIS seems a bit trickier. I'm not IIS expert but I had to write a compiled version of the above so it would be a .exe file that the associated file type pointed to. It's here if you want it..)

SSI, CGI, PHP, ASP, etc.

You can approximate this idea with server side includes, which are available on most web servers. It's not quite as clean (you have to embed some tags in every content file to make it work), but doesn't require changing your web server configutation. It's also useful for integrating your look & feel into pages that are created dynamically, from CGI, PHP, etc.

Server Side Includes

You can do this trick using whatever kind of file type supports "including" other files. On mine, .shtml is one of those. On a windows server, .asp should be one. Split up your template into top & bottom files like above. Then make your test.shtml file like so:

<!--#include file="top" -->

..... your stuff .....

<!--#include file="bottom" -->

It's not quite as good as a real .ht file, since you have to remember to put the #include directives into every file, but it does fulfill the other goals of keeping your look&feel where you can easily modify it and affect all your pages at once.


PHP users can do a similar thing:

<? include("top"); ?>

..... your stuff .....

<? include("bottom"); ?>

Or, even better, you can do:

<? include(""); ?>

at the top of your .php file, where "" is thus:


If you use PERL in a .cgi file, for instance, you would want to display the contents of the file "top" after the HTTP headers and before any generated content. Likewise, put out the "bottom" file when done.

I like to keep things simple, especially when retrofitting this into an existing PERL page. What I did is put a small library of .ht tools into a "" file then

do ""; after I've printed the http headers (content-type, etc.). pumps out the "top" file and sets up an END section that will automatically put out the "bottom" file at exit. It's a quick hack and looks like so:


Absolute Paths

I recommend absolute paths -- paths starting with '/', like "/" -- in the top/bottom files for header images, menu links, etc. That way if you use them in a subdirectory, / will find the files in the right place, not look for them in the subdirectory (where they probably aren't).

Dynamic Content in top/bottom

The top/bottom files are, by nature, unchanging. They can't contain PHP, PERL, or ASP server-side code. They can, of course, include script code that runs in the client's browser. (And they can include dynamic code client-side include techniques like having a <script src="program.cgi"> call to a CGI or PHP page that generates JavaScript code as output.)

Titles and Such

Normally the page <title> tag is in the header, which would now be in the "top" file. However, most browsers don't seem to care, in practice, if you put it in the .ht file. You can put the whole <head> tag and all's well.

Using WordPress (or other) Themes

For the heck of it, yes, you can use WordPress themes, but only for the look -- it won't have the WordPress software behind it to do the administration and such. You might not care -- you might just want the look of a given WP layout. Here's an example. That example uses's own blog page layout at the time I wrote this.

I created this example in about one minute. I saved the source to their page (it's legal to do that, it's all under a GPL). I edited that file, searched for where the main area's content began, saved everything above to "top"; found the bottom of the content area, saved everything below to "bottom". I typed up a short file saying Test-o-Rama, and I was done.

(Why does this work? Because even though the real file on their server probably has lots of PHP in it that you can't see, everything you see has to be downloaded to your browser. So saving the file saves the whole look of it. (Plus the CSS files the template comes with.)

Voila! A whole new sea of cool themes to choose from.


This has been a huge timesaver for me. I hate repetitive tasks like editing hundreds or thousands of files to change a theme -- that's what the computer is for. Now I just whip up a new .ht file and I don't have to worry about the surrounding layout.

Add it to a simple page editor like TinyMCE and you have an instant Content Management System. (With the benefit that you can change the editor for another at any time; they aren't wedded together in any way.)

I hope this saves you as much time as it has me. Enjoy!


  Bookmark and Share

© TechSoft | Privacy policy