Splitting up a html page and loading it through header?

Question

I am using HTML5, and would like to speed up the creation and editing of my standard HTML template by splitting it into three separate HTML files.

header.html
content.html (this will be edited and will have other names e.g. home)
footer.html

I have looked at the following resources, but I am not sure if this is possible or how to go about it.

http://www.w3schools.com/html/html_head.asp

http://www.w3schools.com/tags/tag_link.asp

In PHP I would just include the files in the right order. Is there an equivelant in just a plain HTML site?

I have googled this, but I don't think Im searching for the right term. I would appreciate any information, or resources available!

Thanks for your time!

Completely out of context, but nevertheless interesting: [w3fools.com](http://w3fools.com/) — nfechner, Dec 16 '11 at 14:26
Also, just so you know, neither of the two things you looked at would really help you. — cdeszaq, Dec 16 '11 at 14:33
@nfechner , you have put me off that site forever now! Thanks for the wake up :) , I hope I haven't learned any bad habits from that site! — tomaytotomato, Dec 16 '11 at 14:41

score 3 · Accepted Answer · answered Dec 16 '11 at 14:28

For just a static HTML site, there is no html-only way to include files the way you are trying to. You may be able to use server-side includes depending on your server, but by that point, you might as well just use PHP.

Another option would be to make extensive use of Javascript to load the page pieces after the main part of the page is already loaded.

In all cases, though, you will have a major reduction in performance, since a server request is slow. If you need to use templates, just use a dynamic language like PHP.

THanks for the clear and concise answer, I am going back to PHP now :) — tomaytotomato, Dec 16 '11 at 14:45

score 2 · Answer 2 · answered Dec 16 '11 at 14:29

2

You can't do it cleanly with HTML. You could use iFrames, but that's far from clean. The optimal solution would be to use PHP. It will also save you the requests from the browser.

answered Dec 16 '11 at 14:29

Madara's Ghost

172,118
50
264
308

oh well back to PHP then I guess, was just trying to do a basic website :) – tomaytotomato Dec 16 '11 at 14:31
@loosebruce - In general, for any site more than a handful of pages today, you basically need some sort of server-side language. – cdeszaq Dec 16 '11 at 14:33

score 2 · Answer 3 · answered Dec 16 '11 at 14:31

You can do it via include files in SHTML or through some server-side processing which can combine the files into one HTML output stream when a user requests the URL. Standard HTML isn't processed on the server so you'll need to use some server-side technology such as .NET, ASP, PHP, CGI, etc.

score 1 · Answer 4 · answered Dec 16 '11 at 14:28

1

There is no way to do this with plain HTML. You could do it using JavaScript to load the different pages into their place after loading the main page. But that seems somewhat stange and unnecessary.

answered Dec 16 '11 at 14:28

nfechner

17,295
7
45
64

score 1 · Answer 5 · answered Dec 16 '11 at 14:37

The easiest way that I know how to do this is to use a Model-View-Controller (MVC) style framework of some sort. I would use CodeIgniter, which is created with PHP. It's light (2.1 is VERY fast), has incredible documentation, is super easy to understand (even if you don't know much about PHP), creates clean URIs, and will allow you to build dynamic websites (which is what you're wanting to do) with great ease. Your separate pages (called "views" in MVC terminology) will be able to load in the order you choose; in as many controller methods as you need. It's fantastic!

The following are some resources that will help explain what I'm talking about:

CodeIgniter User Guide - Model-View-Controller:

http://codeigniter.com/user_guide/overview/mvc.html

CodeIgniter User Guide - Views

http://codeigniter.com/user_guide/general/views.html

Here are some resources to help you get started with CodeIgniter:

CodeIgniter User Guide:

http://www.codeigniter.com/user_guide

CodeIgniter From Scratch Series by Nettuts+:

http://net.tutsplus.com/sessions/codeigniter-from-scratch/

Here are some resources that you may want if you need to learn more about PHP to start:

http://www.php.net

http://net.tutsplus.com/tutorials/php/the-best-way-to-learn-php/

I hope this helps, and let me know if you need any more help or a clearer explanation. Good luck!

Thanks, I am very familiar with the codeigniter framework and its views system. Its great to have a template view and just pipe the content through taht — tomaytotomato, Dec 16 '11 at 14:39

score 1 · Answer 6 · answered Dec 16 '11 at 14:48

The question is what kind result are you expect? Your question looks like you don't have experience but you feel that is something wrong with your architecture. Do you need it for any bigger webpage or for something smaller? Try to find any CMS and it will have solution to make your work more clear:) If you want to make any experiments, start from begin. You can have one layout and more content files. If your website is simple try with

<body><div>header</div><div><?php include('content'.addslashes($_GET['id']).'.php') ?></div>
<div>footer</div></body>

Don't use iframe, this is deprecated solution:)

If you have not knowledge about php and want to get good practice, read about mvc and hmvc as another think about any framework. Codeigniter is bad idea if you haven't experience, zend framework too. Read about symfony 2.0. You have a lot articles, very good documentation, video presentations. Try to understand how it works and as another step use it for you website. I recommend irc support channel #symfony. You can connect to irc by mirc client for windows (server sendak.freenode.net or other) :) Have fun! — , Dec 16 '11 at 15:00

unor · Answer 7 · 2013-12-22T20:32:14.147

In HTML5, you can embed (but not include) HTML documents with the object element, with the iframe element, and with the embed element.

<object data="include-me.html" type="text/html"><!-- fallback content --></object>

<iframe seamless src="include-me.html"></iframe>

<embed src="include-me.html" type="text/html"></embed>

`embed`

Using embed might be a bit shaky, not least because it’s intended "for an external (typically non-HTML) application or interactive content". When it doesn’t render the HTML document, try to remove the type attribute (at least it then worked in Chromium).

`iframe`

Using iframe might work for you in combination with the seamless attribute (beware of browser support). The HTML5 (CR) spec has an example:

An HTML inclusion is effected using this attribute as in the following example. In this case, the inclusion is of a site-wide navigation bar.
<!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
 <h1>Mirror Mirror</h1>
 <p>Part of the MovieInfo™ Database</p>
 <nav>
  <iframe seamless src="nav.inc"></iframe>
 </nav>
</header>
...

`object`

The HTML5 (CR) spec has an example:

In this example, an HTML page is embedded in another using the object element.
<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>

Splitting up a html page and loading it through header?

7 Answers7

`embed`

`iframe`

`object`

Linked

Related