including other pages in HTML documents

Question

Let say you are working on a website template that has many pages (index.html, blog.html, contact.html...). You start by designing the home page and then move on to other pages. While you are on other pages, you think of some improvements and these improvements must affect the whole website.

So I return to each page and make the change. This is quite unproductive especially when you have 6 or more pages and sometimes you forget to update the change.

If it were PHP, I would do

require ('header.php');

This worked for me well. But right now, I'm working on HTML and don't really like to transform to PHP and then again to HTML.

So do you have a specific method/way of doing this?

Answer 1

You can use server-side includes to get the effect you want, if your server supports them.

You can use PHP to include a number of smaller HTML files. The PHP script is minimal. No "transform" is required. Just something like require('header.html'); require('body.html'); require('footer.html'); or some such.

If what you're worried about is having to write a lot of PHP, you can use a templating engine such as Smarty TPL to clearly separate the code from the pages and minimize the amount of coding you have to do. This has the added advantage of having HTML "generators" that will automatically do things like producing radio buttons for you or obfuscating email addresses.

You can use CSS to centralize styles for your page so you can make site-wide appearance, layout, and design changes by modifying the stylesheet.

Answer 2

You could use PHP as a pre-processor, a code generator. Run the PHP on your local computer, then save the static HTML pages it produces and post them to production. You could write a little script to visit each of your PHP pages and save the corresponding HTML. Then you could have the convenience of PHP at design time and the simplicity of HTML in production.

Answer 3

If you're working with HTML pages, (e.g. including extensions .htm and .html), consider using Server Side Includes. This approach works with basic HTML parsing, and is supported by most/all major web servers, including Apache and IIS.

Simply include this text in your .html file:

 <!--#include virtual="header.html" -->

The web server will then fetch the markup in that file, and will insert it inline in the page it's currently serving.