Export parts of a web page to another file

Question

So I have a website with more than 10 pages. Now I want to export the head section, the header and the footer to other files, in order to facilitate further editing of any of those section, without having to go through every single page. Is it possible to make a header.html and have the other html files import the code from the separate file?

Answer 1

What you're describing is an "include" and here's how to do it with PHP. I recommend using a server side language like PHP to do the include because it will definitely be indexed by Google and you don't need to worry that the user has javascript disabled or poorly supported.

First of all, you won't be able to do this unless your webpages are either saved as PHP (with .php extension) or your HTML pages (.html extension) are being parsed by PHP. Obviously you'll also need PHP running on your server.

Take the chunks you want to "include" and save them into their own files (header.php, footer.php, etc.). Put them in their own folder under your assets area (such as a directory called includes or inc). Then, in your web pages, use PHP to include those files:

<?php include_once($_SERVER['DOCUMENT_ROOT'].'/include/header.php') ?>

I like to use the $_SERVER['DOCUMENT_ROOT'] variable so I don't need to remember the relative path to the include directory. Use that include line exactly where you would place the original header html.

If you want to keep your files as HTML but have them parsed as PHP, you'll need to make sure your server is parsing HTML files as PHP. You can direct the server to do this in the .htaccess (assuming Apache) where you'll need a line like this:

AddHandler application/x-httpd-php .php .htm .html

This line will be different for different host environments, so you may need to tweak that.

Answer 2

You could move your header and associated files to an html file and just call jQuery load to bring it in.

USAGE http://api.jquery.com/load/

You can also use PHP to do a php include_once of your header.php file. This is similar to what wordpress does!

USAGE http://php.net/manual/en/function.include-once.php

Good luck and let me know if theres other questions!

Answer 3

Yes, your problem is a general problem of preventing code duplication. As usual with general problems this problem was addressed a lot with a lot of different approaches over the years.

And there are more possible solutions, it would be a very hard task just to list all the possible solutions, so my answer will be very vague.

• You can use the object tag to reuse your structure
• You can load it with a client-side language, like Javascript (or using its very popular library, called jQuery)
• Finally, you can generate your HTML using a server-side language

Answer 4

You can't do this with CSS. You can call those HTML contents from separated files using Ajax (it's pretty simple with jQuery) or you can directly include the files using PHP.