How do I include one HTML file inside another?
Itâs very common practice to have a consistent theme on a web site.
You might have a standard navigation bar or a logo or even just a page footer with
copyright and administrative information. Rather than actually having
that information on each and every page it would certainly be nice if
you could write your navigation bar once, keep it in one file, and then
reference that file in each of several different pages. Make a change
to the navigation bar in one place and instantly all pages are updated.
Welcome to âincludeâ files â an incredibly powerful facility that
can do this, and so much more, on your web site.
Become a Patron of Ask Leo! and go ad-free!
Includes break down into two categories: client and server. A
âclientâ side include is one performed by your browser. Unfortunately,
there is no specific syntax in HTML for client side includes so we
have to play a small game using javascript. A âserverâ side include is
exactly that â the include happens on your web server so the client
browser never even knows it happened.
Server Side Includes
Weâll start with the conceptually easier one: the server side
include. The specific syntax will vary based on what type of server you
have and what language your pages are written in.
Simple HTML pages on most common web servers can use a syntax
called Server Side Include, or SSI. As an example in
an HTML file a.html we can place this line:
<!--#include FILE="b.inc" -->
The page seen by a browser viewing a.html will consist of the
contents of a.html before the include line, followed by the contents of
b.inc, followed by the contents of a.html after the include line. Put the
HTML for your navigation bar in a file like b.inc, and all your pages
can show the exact same bar.
SSI is available on both Apache and Microsoft IIS web servers. On Apache
some configuration may be needed but even if you donât have access to the
actual server configuration files it can typically also be enabled by
commands in a file named .htaccess that you will either find or can create
in your serverâs web directory. Read more about Apache SSI
here. Under IIS, SSI is enabled anytime you
use â.aspâ pages â so the only configuration you need do is to name your
pages .asp instead of .html. Read more about Server Side Include in
ASP pages here.
Another popular ASP-like programming environment is PHP. PHPâs include
syntax is very simple:
<? readfile("b.inc"); ?>
Naturally, PHP has a host of additional processing ability but much
like ASP the only requirement to make the include above work is to have
PHP on your web server and name your file â.phpâ.
With all of the above approaches, the browser viewing the page knows
absolutely nothing about the include â it all happened before the page
was downloaded. However, sometimes processing an include on the server
isnât the right option. Thatâs where processing an include on the
client comes in.
Client Side Includes
As I mentioned above, there is no actual syntax for a client-side
include but we can mimic one using Javascript. For
example:
<script src="b.js" type="text/javascript">
</script>
When encountered, the browser downloads the script âb.jsâ, executes
it, and prints any output that the script might generate as if it were
inline HTML. Technically thatâs not an include but the
script âb.jsâ could be nothing more than a series of javascript âprintâ
statements such as these:
document.write("<table>")
document.write("<tr>")
... and so on
You can see itâs âprintingâ the HTML you want included. In other
words, if you can format your include file as a series of javascript
prints, you can use client-side include to insert it.
Now things can get very interesting, because weâll introduce
two things: remote includes, and CGI programs, into the mix.
Remote Includes
The files weâve included so far have been assumed to be on your own
server in the same location as your other HTML pages. In almost all
cases you can âincludeâ using a full URL to any other server on the
internet.
For client-side includes itâs very simple. It just works:
<script src="http://example.com/b.js" type="text/javascript">
</script>
This works just like the earlier example except that b.js will
get loaded from example.com rather than your own server. Similarly,
PHP also âjust worksâ:
<? readfile("http://example.com/b.inc"); ?>
Unfortunately Apache SSI directives do not support remote
includes. But thereâs almost always a way and we have a workaround
using CGI.
CGI Includes
So far weâve included only âstaticâ HTML pages. As it turns out you
can âincludeâ the output of a server-run CGI program. This then
becomes our solution for Apacheâs lack of support for remote includes.
Weâll start with this very short Perl program:
use LWP::Simple;
print "Content-type:text/html\n\n";
getprint ($ENV{'QUERY_STRING'});
Weâll call it âproxy.plâ. Proxy.pl must be appropriately installed
on your server into your cgi-bin directory or its equivalent. By being
local to your server, Include directives can reference it.
Proxy.pl simply fetches the contents of the URL passed as a parameter.
This means we can perform an apache remote include this way:
<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://example.com/b.inc" -->
It works like this:
- The include executes proxy.pl with the parameter âhttp://example.com/b.incâ
- Proxy.pl then fetches b.inc from example.com and prints it.
The result is that the contents of b.inc show up as an included file.
Includes + remote includes + CGI
So far weâve used a CGI program to fetch what is essentially just
another static html file. In fact, if we put all these pieces together we can
create some very useful and interesting internet applications.
Randy Cassingham of This is True wanted to be
able to provide his readers who had web sites the ability to host one of
his stories. Sounds like a job for an include file, right? But he also
wanted that story to change every day. Thatâs more than a static HTML
page; thatâs a CGI program that outputs a different story each
day.
The result is tad.pl (True-A-Day) â a Perl script that picks
a new story every day and outputs HTML. Given what weâve talked about
so far so you can probably guess how itâs used. As a client side
include:
<script src="http://www.thisistrue.net/cgi-bin/tad.pl" type="text/javascript">
</script>
Thatâs it in its simplest form. Note that:
- tad.pl is written in Perl. It does whatever it needs to gather
the HTML for the story to be output. - tad.pl outputs javascript. In fact, tad.plâs output is nothing
more than a series of âdocument.writeâ statements. - The client browser executes the javascript. The result is that it
prints the HTML that tad.pl constructed for todayâs story.
Using tad.pl in a server-side include looks like this:
<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://www.thisistrue.net/cgi-bin/tad.pl?ssi=1" -->
Note that as discussed above we had to use a local
CGI program, proxy.pl, to fetch the remote URL.
Note also that weâve added an additional parameter, ssi=1.
This causes tad.pl to output the HTML it gathers without the
javascript document.write statements. The final sequence looks like
this:
- proxy.pl executes on your server, and is passed the URL
âhttp://www.thisistrue.net/cgi-bin/tad.pl?ssi=1â. - proxy.pl fetches that URL, causing tad.pl to execute
on www.thisistrue.net. - tad.pl once again does whatever it needs to gather the HTML for the
story to be output. - tad.pl outputs the HTML to be included.
- That output is returned to proxy.pl, which in turn prints it, where
it becomes the âincluded textâ. - The client browser sees nothing but HTML â the HTML from the
containing page with the HTML from tad.pl inserted in place of the
include statement.
As you can see, includes are not only a great organizational tool
allowing you to collect common information into fewer files, but also a
powerful way to add functionality to your web site and perhaps
others. Iâll end this with True-A-Day included via a client side include:
The local IT guru said: âIt is not possible to include HTML code to an existing html file. You have to edit all these 500 files and change the header manually.â
No comment! Of course it is possible to edit 500 files at once and change strings in them, provided your local IT hero has not decided to have Micro$oft as OS and Livelink as web server.
Anyway, this hint helped me solving the problem, the local IT superman gave me week to finish the job. I had a lot of fun during this week ;o)
Cheers.
this is just another more reliable verion of a previous post for phpâŠ
or
by doing it this way, you are making sure that the webserver no matter what brand will understand it, because >> alone is asp style..
the second choice >> include_once ensure that if a file being included to the page is already present it doesnât include it agaiin
Glad I found this, I make extensive use of ssi includes I have spent ages trying to figure how to pass VARS to ssi, I see this canât be done.
I would like to have a page with a number of link to static pages like /product/1001.html and /product/1002.html and have them appear in the current page (without frames) when clicked
The closest I can get to this is by modifying your script proxy.pl, Iâm am sure there is a more elegant way, especialy since the pages I am linking to are on the same website?
Regards Roly
#!/usr/bin/perl
use LWP::Simple;
print âContent-type:text/html\n\nâ;
open (FILE, âheader.txtâ) || die âcannot open file: $!â;
undef $/; # read in file all at once
print ;
close FILE;
getprint ($ENV{âQUERY_STRINGâ});
open (FILE, âfooter.txtâ) || die âcannot open file: $!â;
undef $/; # read in file all at once
print ;
close FILE;
for people
require_once(â./file.extâ); // Requires File only once
Require(â./file.extâ); // Requires File
include(â./file.extâ); // Includes file
Now I am learning php and im quite good at it so ill drop a few php methods.
I always have a tons of files.. i spread my code everywere and its neatly sorted. but sometimes like lets say you wanna make a dice script you would put
ReRollâ;
?>
I cannot seem to get proxy.pl to work at all, even locally. Am I correct that the script file should simply be as follows:
#!/usr/bin/perl
use LWP::Simple;
print âContent-type:text/html\n\nâ;
getprint ($ENV{âQUERY_STRINGâ});
Can someone please help? SSI is working fine locally, CGI is enabled, the script is chmodâd to 755 (as is the directory), and Iâve tried every variant thinkable for the links on the shtml pages. Please see the following examples:
At http://www.tcconcepts.com/pagetest1.shtml Iâm using a normal include like so:
<!â#include virtual=âpage1.txtâ â>
âŠwhich is pulling in the sample text (everything below the line) just fine from the referenced .txt file.
At http://tcconcepts.com/pagetest2.shtml Iâm using:
<!â#include virtual=â/cgi-bin/proxy.pl?page1.txtâ â>
At http://tcconcepts.com/pagetest3.shtml Iâm using:
<!â#include virtual=â/cgi-bin/proxy.pl?/page1.txtâ â>
(note additional slash)
Neither of these latter pages (using proxy.pl) works. Nor do any other variants of the link including â./â, â../â etc. Iâve also tried referencing different (later) versions of Perl. Iâm not even getting error messages. The space is created, itâs just not populated with the content. Any ideas?
Itâs expecting a URL. So youâd want proxy.pl?http://whateverâŠ. â thatâs the point of proxy.pl.
Understood. But when that didnât work, I thought Iâd try local. In any event, see:
http://www.tcconcepts.com/pagetest4.shtml where Iâm using the following:
<!â#include virtual=â/cgi-bin/proxy.pl?http://www.comptonmfg.com/page1.txtâ â>
Again, the space is created, but no content fills it. To my non-Perl brain, this implies that itâs seeing the need to insert something, but not what that something is.
So just running http://tcconcepts.com/cgi-bin/proxy.pl?http://www.comptonmfg.com/page1.txt will test it outside of the SSI environment. It should just print the contents of the referenced file.
Obviously yours doesnât, and Iâm not sure I see an obvious reason why. I would add a print statement before the getprint:
print $ENV{âQUERY_STRINGâ} . â\nâ;
That should simply ensure that the QUERY_STRING is coming in correctly. If it is (and Iâd guess it is) then I would suspect some kind of configuration issue on your server thatâs preventing getprint from working.
Okay, that pulls in the URL, but not the contents of the URL.
The script now looks like this:
#!/usr/bin/perl
use LWP::Simple;
print âContent-type:text/html\n\nâ;
print $ENV{âQUERY_STRINGâ} . â\nâ;
getprint ($ENV{âQUERY_STRINGâ});
Using the http://www.tcconcepts.com/pagetest4.shtml link now pulls in text that reads âhttp://www.tcconcepts.com/page1.txtâ, rather than the HTML code that resides in that file.
Just curious. Could the fact that my version of LWP is 5.53 have anything to do with it? By the way, thanks for your help; I really appreciate it.
For what itâs worth, what Iâm trying to do is find a way to allow others (remote sites) to be able to insert an include (and perhaps a small cgi script like proxy.pl) that pulls actual code from a page on a site that I control. IF you have some other idea, Iâm all for it.
Itâs possible that LWP is an issue, but then other things could be as well. Iâd look at your error logs, and if you have shell access, telnet in or ssh in to the server and run the perl script directly from a command line and see if it does what you expect. See if you can get ANY âgetprintâ to work.
An alternative might be to try PHP if your server has it. A test.php in your regular (not cgi-bin) directory that has this will tell you if it would work:
<? include (âhttp://whateverâ); >
This *may* work, if your PHP configuration has it enabled.
Well, running it from Telnet (if Iâm even doing it correctly) yields the following error message:
No such file or directory
âŠas if itâs looking for a file named proxy.pl?http://www.comptonmfg.com/page1.txt rather than actually going to the address in the query string.
Iâve adjusted the path to perl to a later version of perl. No help there. Iâm an HTML guru, not a perl guru, so I am admittedly ignorant of a lot of this. How do I test getprint?
Also, Iâm wondering if as small as this script is, it might not be overkill for my needs. What I mean is, if everyone who I want to use this script is going to be referencing the same page, is there an even simpler way; for example, embedding the actual URL in the proxy.pl script. That may be what weâve achieved with the extra line of code, in which case we still have a getprint issue, but I thought it worth mentioning. The bottom line is if people will need to install the script anyway, and if the only thing I want them pulling data from is a pre-determined text file, is there a way to do that and bypass the query string altogether?
Form the command line you have to specify the parameter using environment variables (set QUERY_STRING) and so on.
But yes, hard code a URL into the perl script instead of attempting to use the parameter and see if you can get that working.
Here is how Iâm hard coding the URL into the script:
#!/usr/bin/perl5.00405
use LWP::Simple;
print âContent-type:text/html\n\nâ;
getprint (http://www.comptonmfg.com/page1.txt);
And Iâm referencing it like this in the shtml page file:
<!â#include VIRTUAL=â/cgi-bin/proxy.plâ â>
and it returns an error. Is this correct or am I missing something?
Hey, it looks like I got it to work with this:
#!/usr/bin/perl
use LWP::Simple;
print âContent-type:text/html\n\nâ;
print get(âhttp://www.comptonmfg.com/page1.txtâ);
Does that make sense? Thereâs no getprint involved. I was just goofing around and, poof, it worked. Second question: If this DOES make sense, should that same script work with other Apache configurations (Iâm assuming that people with ASP and PHP will be able to simply pull in the content from my page with just the appropriate include, skipping the script)?
and again
obviously no tags allowed
#include VIRTUAL=â/cgi-bin/GetRemote.pl?http://www.colosoccer.com.au/pentire.htmlâ
Try using CSS and putting images as backgrounds to
Have a look at http://www.promotion-croisieres.com to see how this is done. Its a php file calling an include for the navbar, but the background image is tucked away in the CSSâŠ
Shraddhan,
If youâre following the guidelines listed in this article, then technically everything should be ok. I was just fiddling around with this, and had some issues getting the includes to display properly. But by simply renaming my file from curious.html to curious.asp, the include then worked flawlessly. The include didnât care what the file extension was (html, asp, dat etc) for the file I used to hold the included data, it simply took what was in the included file and flowed it into the .asp file.
As an overview, I used 2 files:
â curious.asp
â content.dat
curious.asp holds:
<html>
<head>
<title>include test</title>
</head>
<body bgcolor= â#ffffffâ topmargin=â0âł leftmargin=â0âł marginheight=â0âł marginwidth=â0âł>
<!â#include FILE=âcontent.datâ â>
</body>
</html>
content.dat holds:
<table width=764 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<tr valign=top>
<td align=left valign=top>
Stuff I wanna say and images I want to include etc.
</td>
</tr>
</table>
A stumbling block that could be messing things up for you is: is the server thatâs hosting your files .asp compatible? if itâs not, then your includes will not work. (using the format of: <!â#include FILE=âcontent.datâ â> ). Hope that helps you out. To my knowledge, the framesets should not be causing a problem.
Hi All,
Well i read all the solutions provided but i couldânt find any solution to my problem. i have two html files ie index.html and menu.html , i want to include the menu.html in my index.html. i used <!â #include FILE=âmenu.html â> but its not working.. please provide me the better solution
regards
Naseer
a) you have a space between the â-â and the â#â â thatâs enough to have it fail.
b) the server must be configured to support SSI. You should check.
i canât ge this to work. i am using apache, i admit fairly new with apache, but i have followed the steps numerous times to use SSI on apache, and everytime, it just completely ignores my include statement. using the correct context also.
Check with your host â it may need to be enabled, or it may only be enabled for certain file extensions (like .shtml).
I use the code
as u mensioned. and also
tested.
in my main html page. but it doesnât work.
I want to include my common header in to all pages.
Please help me.
Thanks
dear Leo
i have got three files help.htm ,contact.php and ..inc
i have called the inc file inside teh php file
now i want to call this php file inside teh htm file , i.e when i click help.htm the contents of contact.php should called
i tried the below mentioned php tag on help.htm but all in vain. apprecaite your invaluable assistance
AXIS Engineering Consultants
That type of include (<?) needs to happen in a PHP file, you have it in an HTML file. You probably need to use SSI include. The style of include needs to match the type of source file, not the type of file being included.
Iâve idea about how to write include syntax in a html file. http://www.seobbsr.com/
Hi Leo, thanks for this informative article.
Suggestion to all those who want to include html in html and donât know much about servers, php and or ssi: Use the client-side method described here. Itâs easy and it works as long as Javascript is not disabled on the visitors browser. For this case you still can add this:
<noscript>Please enable Javascript in your Browsersettings!</noscript>
cheers
Thank-you for the helpful info on %includes.
Iâve used them in programming in other non-web languages (PL1, JCL PL/SQL etc), but not in web context.
Text at top/left of web pages often contributes to a pageâs ranking for search engines. If this text is removed, a menu for example, to a seperate document (by any of the described methods) will this likely mean the page has a lower ranking with such keyword text omitted?
I READ THIS ARTICLE, IT DOESNâT HELP AT ALL FOR CLIENT SIDE SCRIPTS aka INCLUDING A FILE IN ANOTHER FILEâŠ
HERE IS A VERY HELPFUL ARTICLE:
http://www.moock.org/webdesign/javascript/client-side-include/index.html
I finally got my problem solved, which was not only a client side include, but a client side include where I had to calculate which include to include. (Did I make myself clear or what? ;-> )
I wanted to include the daily watchwords (see http://www.ebu.org) in my âOutlook Todayâ page.
This is my code (I hope it shows well):
function fuehrendeNull(wert)
{
if (wertâ)
If the cite-tags are showed, they are the ones which shouldnât showâŠ
If it doesnât show at all or only very strange, my trick is to do a âdocument.writeâ that writes ANOTHER âscriptâ-Statement, in which the variable is inserted.
Well, the code didnât show really well.
Here it is again, only with much less
Html Attribute for â Marquee Slide Image and Text â
http://html-lesson.blogspot.com/2008/06/marquee-slide-image-text.html
for apache, when you want to use Server Side Includes, with the default configuration, you will have to have your file âfile.shtmlâ and not just âfile.htmlâ. This is easy to trip over when you first start.
I believe that you can have apache look at all âhtmlâ files for includes, but there is a penalty for this, which I canât recall -could be efficiency.
ââBEGIN PGP SIGNED MESSAGEââ
Hash: SHA1
Iâve found that â.shtmlâ, while common, is not at all
standard. It definitely pays to understand your specific web
serverâs configuration.
Also, scanning all .html (and .inc) is definitely possible,
and not a large performance hit at all. This site, for
example, is configured that way.
Leo
ââBEGIN PGP SIGNATUREââ
Version: GnuPG v1.4.7 (MingW32)
iD8DBQFIf33UCMEe9B/8oqERAgHjAJ4vvXyNhWpDmcRM5pHuHK5dp1Hi1ACgiVua
BPNQ1KC/NkFsfqPPBwRR0xI=
=KL4T
ââEND PGP SIGNATUREââ
Couldnât get the included file to display correctly. Used php require_once(âBaseMenu.phpâ): You can see the problem at URL: http://medical.julseth.net/disMP.php
Excellent site, It was pleasant to me.
Thank you! It works with an URL?
How could you not mention iframes! iframes! iframes!
05-Jan-2010
I found that when include is used instead of the hard coding it inserts an extra line as if itâs adding
. Why is that and how this can be avoided?
Leonid:
Iâve found that this can occur when the included file is encoded as âUTF-8â. Change it to âUTF-8 without BOMâ using a program like Notepad++ and you should be good to go.
Excellent article! Including files as opposed to pages, such as in iframes, is far more convenient, in my opinion. I know that with HTML5, iframes will be going the way of the dodo. Do you know if included files will still be valid, and if they will be, will there be any changes to the syntax?
Much thanks for writing this! *bookmarked*
Thanks. BTW, it seems to me that JSPâs include syntax was left out. For example:
thanks, my include now works â but if I want to include a footer on every page, does this mean iIhave to rename all 56 pages in my site from .htm to .php? thanks
27-Jul-2011
Hello. Great article thanks! However iâm having problems with teh client side include. I have sucessfully used to pull in a simple line of text into my page, for example: document.write(â
i am an include
â) . This is all cool. However, if I try to add a class to that paragraph, I get nothing. For example: document.write(â
i am an blue include
â) doesnât work. It seems as though the ââ characters are breaking it. Any ideas? I need to be able to style whatâs in my include! Thanks in advance.
1. I subscribed but didnât get an email.
2. Question: I have a dropdown menu with a pick list of every country in the world. Its set up as a regular âselectâ box with all the data on the html page right now. But it slows down the page load and makes working with the file in Dreamweaver very slow too. Iâve tried moving it off the page with an #include, but it no longer works. What can I do?
thank u
very much sir!!
i was really stuck in this problem!!!
but after going through your article!!!
i solved this problem very easily!!!
once again thank u
very much!!
jai gurudev!!!
Can a path be put in an HTML include file?
This is the example given in the article.
<!â#include FILE=âb.incâ â>
But is it possible to have a path or relative path within the include file statement?
For example,
<!â#include FILE=â../otherdirectory/b.incâ â>.
Iâve tried this and it didnât work so either it canât be done or Iâve done something wrong.
Please help,
Thanks,
Mike
28-Mar-2013