research

One thing about HTML that has always bothered me is that the language has no support for using one HTML file inside many other HTML files.

I’m used to writing programs in languages that encourage (or, at least, permit) modularity. For example, let’s say I am writing a group of programs in C, and all these programs share a common configuration. I would put that configuration into a separate file (let’s call it “configuration.h”). Each program would include the directive:

#include "configuration.h"

This way, I don’t have to put that configuration information into each program. It only lives in one place, and if I change the configuration in that one place, all the programs will use that new configuration.

I’m working on another web site, which at the moment has about 30 HTML files. Let’s say I want each of those files to have the same header, footer, and advertisements. Sure, I could use PHP or some other language to dynamically generate those pages, but I want to keep things simple. What I want is to extract the header, footer, and advertisements from each of those HTML files, put that information into a single file, continue editing my pages in whatever HTML editor I choose, and then have an easy way to put the header, footer, and advertisements into each of those pages for publishing. I want to be able to change the header on all my pages by editing just the file that contains the header.

If you search the web for HTML preprocessor, you’ll find many, MANY programs that address this problem. I looked at about 10 of them. Many are quite good, and full of features to address these types of deficiencies in HTML. However, all the programs I looked at expected you to put special codes into your HTML files to tell the preprocessor what to do, and unfortunately those codes weren’t HTML. This means that my WYSIWYG HTML editor wouldn’t recognize the codes, and I’d probably have to go back to editing my HTML files in ‘vi’.

Here’s a quick way to solve this problem. It’s very simple, it’s HTML-editor-friendly, and it works.

You start by putting the common HTML code into it’s own file, for example, “left_sidebar.html”.

In each of your web pages, put the following comment where the left sidebar HTML should be inserted:

<!--INSERT_LEFT_SIDEBAR-->

Now you can edit your web pages as usual, in whatever HTML editor you like. Since that’s a valid HTML comment, your HTML editor won’t complain about the syntax. (Of course, you will not be able to see the left sidebar from within your editor.)

When it’s time to publish, copy your web pages into a new directory, then go into that directory and run the command:

sed --in-place=\.bkp -e '/<!--INSERT_LEFT_SIDEBAR-->/r left_sidebar.html' *\.html

(Here I’m assuming you are using some kind of Unix-like shell and have access to the GNU ‘sed‘ command. If you’re running any flavor of Unix, you either have it or can easily get it. Windows users can get sed and various shells from the Cygwin package. MacOS users - you’re Unix-based, but I’m not sure if commands like ’sed’ are included.)

This command will search every HTML file in the current directory, looking for the comment <!–INSERT_LEFT_SIDEBAR–>. Wherever that comment is found, the contents of the file “left_sidebar.html” are inserted immediately following the comment.

Yes, this is a nothing more than a search-and-insert operation, but it really makes managing a small web site a lot easier.