1

I've been redesigning a website I built several years ago, originally using frames, so that the website uses CSS and div tags. In trying to make my webdesign as flexible as possible, I wish to share common elements, such as the banner at the top of the page, and the footer, etc. so that they link to one common file - and a change to this file causes a change on all other pages. I've been trying to do this without the hassle of setting up PHP or ASP etc. server side.

I've found the following solution to work, but have found no references to it online, what are the disadvantages of the following solution?

<div id="wrapper">
<div id="header"><object type="text/html" data="test.html" style="width:100%; height:100% margin:0"></object></div>
<div id="content">Individual page content here.</div></div>

Where the test.html file contains the common header.

charlieahill
  • 29
  • 5
  • http://stackoverflow.com/questions/18464326/master-pages-technique-in-pure-html – Mitch Wheat Nov 15 '14 at 22:43
  • I don't think so. This will especially not work in e.g. Lynx (best browser ever ☺). But I don't know enough about “modern” browsers, so I'll leave that for someone else to answer. – mirabilos Nov 15 '14 at 22:43

2 Answers2

0

There are multiple advantages to setting up some sort of server-side scripting. The first I can think of is that there are fewer HTTP requests, which will make for snappier page load times. Second, it's pretty easy to set up and it adds a whole new world of functionality. Third, I rarely come across a legitimate use case for <object> elements.

That being said, one implementation in PHP could be as follows, in your index.php file:

<?php require_once('header.php'); ?>
<!-- index.php content goes here! -->
<?php require_once('footer.php'); ?>

Obviously, your header.php and footer.php files would contain the header and footer templates which would be included on every page load.

This approach drastically simplifies your development and makes for a faster user experience. Of course, you don't need to use PHP, you could use Python or any other server-side scripting language out there for all I care. I just used it as an example.

Marcus McLean
  • 1,306
  • 2
  • 13
  • 24
0

If you don’t want to use server-side programming (which could also be a CMS), SSI, or local tools (like static site generators):

Plain HTML5 offers three ways to embed an HTML document in an HTML document:

  • embed
  • iframe
  • object

[…] but have found no references to it online

The HTML5 spec contains such an example using object:

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>

Disadvantages? Well, all the user agents you are interested in would have to support the object element. It might be the case that some consumers (e.g., some search engines) don’t index content embedded like that (but discussing this is off-topic on SO).

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360