0

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 .html 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 .html containing only my header and footer so I can do something like include template.html which automatically would put the content of the template.html 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 include 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?

Rasclatt
  • 12,498
  • 3
  • 25
  • 33
DeathKing
  • 301
  • 2
  • 16
  • 1
    If PHP is your language of choice, look into [include()](http://php.net/manual/en/function.include.php). Your syntax is actually correct: `include 'template.html';` But that statement must be included in a PHP file, eg. `index.php` – mferly May 25 '16 at 15:31
  • thanks for your quick reply, Marcus! ... I honestly agree with you regarding that matter but my main question would be... won't a included html file that contains my , Navbar and Footer have compatibility issues with the style i am making with the current document? Example: footer loaded earlier so it will be above my content area? – DeathKing May 25 '16 at 15:35
  • It sounds like what you're after is a template engine such as [Twig](http://twig.sensiolabs.org/) for PHP – Mikey May 25 '16 at 15:36
  • 1
    Split your header and footer into separate files. Then include them within your main template wherever you need them. `index.php`: ` ... more stuff on page ` Something to that effect, anyway. – mferly May 25 '16 at 15:40
  • Possible duplicate of [List common html reference tags in one file](https://stackoverflow.com/questions/50221796/list-common-html-reference-tags-in-one-file) – Ben Jul 12 '19 at 02:43

3 Answers3

2

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

    <!DOCTYPE html>
    <html>
        <body>

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

        </body>
    </html>

See this link.

With AngularJS you could use something like this:

    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <body ng-app="">
            <div ng-include="'myFile.htm'"></div>
        </body>
    </html>

See this link.

With just HTML5 you could try something like this:

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

See this link.

Does that help answer your question?

Community
  • 1
  • 1
Jaromjj
  • 326
  • 3
  • 17
  • so basically in order for this to work for me.. i must: 1. Load the angular.js first 2. Put slice the "template" in to parts in a sense that navbar is seperated from the footer right? correct me if i am wrong... Thanks! – DeathKing May 25 '16 at 15:41
  • AngularJS is a whole other beast in itself. If you're still figuring out the logic behind including files into a standard template, I'd focus on the PHP `include()` approach until you get the hang of it. Then branch out into frameworks. 'Cause what's the point in loading an entire framework simply to include a header and footer? Unless you're going to continue using/taking advantage of the AngularJS lib within your development, don't bother with it right now. – mferly May 25 '16 at 15:54
  • I agree with @Marcus. And I feel like you already said something about PHP. All I used for a while was PHP includes for headers and footers and they worked great. – Jaromjj May 25 '16 at 19:33
2

What you are asking is possible in differents ways:

frame and iframe

take a look at this two tags

I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. You will not be able to add CSS/JS to code in "iframe" tag.

back end solution

Depending on what kind of website you are working on you can include other file. For exemple in php:

include('youcode.html');

HTML5 solution

You can also use the "object" tag :

<object width="100%" height="500px" data="snippet.html"></object>

this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp

Enjoy :)

Ricain
  • 638
  • 1
  • 4
  • 17
1

This can't be done via HTML, you can either do a PHP include or use this W3 schools example:

http://www.w3schools.com/howto/howto_html_include.asp

PHP example template.html rename to template.php

<html>
<?php include template.php ?>
</html>
Anthony 'Runt' Cleaves
  • 109
  • 2
  • 15