Calling html inside another html

Posted on 2009-04-21
Last Modified: 2013-12-29
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.



Question by:nikhilbansal
    LVL 12

    Accepted Solution

    <!--#include file="path to file/include-file.html"-->
    LVL 1

    Author Comment

    Isn't this tag meant to include Server-side source (something like JSP/ PHP etc)
    LVL 12

    Expert Comment

    by:Gibu George
    It is ServerSideInclude, this is an instruction for the http server to include the file
    LVL 12

    Expert Comment

    by:Gibu George
    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:
    LVL 8

    Expert Comment

    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!


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Suggested Solutions

    Title # Comments Views Activity
    nested class vs inner class 5 36
    mergeTwo  challenge 13 53
    IT Company 5 54
    mapBully challenge 6 53
    INTRODUCTION Working with files is a moderately common task in Java.  For most projects hard coding the file names, using parameters in configuration files, or using command-line arguments is sufficient.   However, when your application has vi…
    Are you developing a Java application and want to create Excel Spreadsheets? You have come to the right place, this article will describe how you can create Excel Spreadsheets from a Java Application. For the purposes of this article, I will be u…
    Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
    This video teaches viewers about errors in exception handling.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now