Calling html inside another html

Dear All,

I have a very simple requirement of displaying a html page inside another html page. Something like I have index.html and I want to include header.html and footer.html inside index.html

It's just pure html and no server-side content and I don't want to use frames.

Please let me know the options.



Who is Participating?
Gibu GeorgeChief Technology OfficerCommented:
<!--#include file="path to file/include-file.html"-->
nikhilbansalAuthor Commented:
Isn't this tag meant to include Server-side source (something like JSP/ PHP etc)
Gibu GeorgeChief Technology OfficerCommented:
It is ServerSideInclude, this is an instruction for the http server to include the file
Gibu GeorgeChief Technology OfficerCommented:
A second solution involves JavaScript. With the latest browsers you can include scripts from external files. The contents must be JavaScript instructions, but by including the HTML you need inside a JavaScript function, you can overcome this restriction. First create a javascript file, for example footer.js (the extension must be .js). In this file you store the HTML you want to reuse:

var cText = ''
cText += 'put the html you want to include in lines'
cText += 'like these.'
cText += '<a href="copyright.html>Copyright notice</a>'

Now you must add an instruction to read this file in your html files that use the file. You must put this tag at the position where you want the text to be used:
You must be careful about clashes of names you might be using for css.

There can only be one element in the whole merged document for each id that you are using.

That is if the main document some where has
        <div id="important">  

and the footer document that you want to include also has

        <div id="important">

then you will <strong>need</strong> to make adjustments.  Likewise if you use css classes - eg

        <p class="SmallPhoto">  
in more than one place you will need to ensure that you only have the css definition in one place (no real problem for the browsers but it will be your problem in keeping track what to change because the css definitions will accumulate)


Also the included documents should not duplicate <html>, <head> and <body> tags.


If the place of inclusion has already decreased the width that you have available (or for that matter changed the font size) - the inclusion point may be within a <div> or even a table cell -  then any content that uses absolute measurements ( e.g.  px) may have problems when compered to the layout you get without it being included. Same type of cautions applies to fonts, floats, colours, backgrounds, ... etc.


All that said the idea of inclusion is a good one and can help simplify a series of webpages leaving you to just supply the information for the page and let all the rest remain the same.


I assume that you have something on the server side, perhaps PHP or similar.  It is relatively easy to write a small PHP script the do the document inclusions yourself if you want the flexability that could give you.

Hope all goes well for you, because there may be a few pitfalls!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.