DeathKing DeathKing - 2 years ago 59
Javascript Question

Ability to use a single html that stands as an 'include' to another html page

I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers.

My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page?

Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on.

I made a template that has an extension of

that contains only my header and footer for the whole theme of the site. Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page.

What I would like to do is make a template that has an extension of
containing only my header and footer so I can do something like
include template.html
which automatically would put the content of the
page on each page so I don't have to copy and paste each time. I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site.

I know that html does not actually have an
function but I think there should be a way around this through other languages such as PHP or even JavaScript? I just am curious if its possible and if so, how?

Answer Source

I think you have a few different options. With PHP you could do something like this:

    <!DOCTYPE html>

            <h1>Welcome to my home page!</h1>
            <p>Some text.</p>
            <p>Some more text.</p>
            <?php include 'footer.php';?>


See this link.

With AngularJS you could use something like this:

    <!DOCTYPE html>
    <script src=""></script>
        <body ng-app="">
            <div ng-include="'myFile.htm'"></div>

See this link.

With just HTML5 you could try something like this:

    <object name="foo" type="text/html" data=""></object>

See this link.

Does that help answer your question?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download