Optimum way to insert external html content HTML5 compliant? php vs HTML5 vs javascript methods

Question

I know how simple this probably seems to you gurus, but I have been searching for over an hour to no avail...

Goal: Use a single footer file and menu file for all my webpages. Taking into account blocking, speed, etc. The content of my menu is pure html/css and the content of my footer is pure html/css. Would the optimal solution change based on the content being injected? eg If videos, jscript, etc. were involved.

Two part question: 1) Which method is optimal? Some kind of php include, using the tag, using jscript, etc. 2) How precisely is this achieved keeping HTML 5 standards? ie For the php method to work, does my calling webpage need to be .php and then does that make the HTML5 standard a moot point? eg If I want to inject footer.php into index.html, does my index file also have to be .php? Similarly for the tag, can the external file be an .html file(I don't like the idea of reloading all the header information with .css calls) or should it be .php?

Within the index.html file I have tried the following:

<object id="footerArea" width="100%" height="20%" 
  type="text/html" data="footer.html">
</object>

and

<?php include 'footer.php' ?>

Neither of these seem to work for me.

In case you are wondering... Here is the code for my footer I am trying to inject with sample data to make it shorter and easier to read:

<div class="footer box">
<p class="f-right t-right">
 <a href="#">www.mysite.com</a><br />
  Address: Medford, OR<br />
  Phone: (541) 555-5555
</p>

<p class="f-left">
 Copyright &copy;&nbsp;2011 <a href="#">My Name</a><br />
</p>

<p class="f-left" style="margin-left:20px;">
 <a href="http://sampleurl.com" target="_blank">
  <img style="border:0;width:88px;height:31px"
   src="http://sampleurl.com"
   alt="Valid CSS3!" />
 </a>
</p>

<p class="f-left" style="margin-left:20px;">
 <a href="http://sampleurl" target="_blank">
 <img src="http://sample.png" width="228" height="50" alt="sample alt" title="sample title">
 </a>
</p>
</div>

Please excuse my formatting. I am still new to posting code in forums. I tried my best :)

Answer 1

The extension of a filename you seen in a url has absolutely NOTHING with how that file will be treated by a browser when it's downloaded. It all comes down to the Content-type header that accompanies the file. A webmaster can trivially configure their server to treat all .exe files as plain HTML pages. They can also tell the webserver to run .html pages through the PHP parser. In fact, with "modern" SEO-optimized urls, you rarely see a file extension at all. It'll all be things like example.com/some/wonky/path , not example.com/page.php?id=wonky .

The fact that PHP has built and output a page also has nothing to do with HTML compliance. It comes down to whether the page the browser receives conforms to the standards. Are all tags properly closed? Attributes properly defined? Tags properly nested? Blah blah blah.

If you've built your code properly, the html that's output will be properly structured and be valid html. If it's not valid html, that's not PHP's fault - that's your fault for putting together code that doesn't produce the proper output.

The only time a file extension in a URL MIGHT be relevant is if the webserver outputs a generic content-type, eg "application/octet-stream". The browser MAY use a detectable file extension to guess at the content's type and try to treat it as such. But this is not guaranteed nor reliable.

Answer 2

This is what a PHP include should look like:

<?php include 'footer.php'?>

As far as I can see the code you have in your question is assigning the string "footer.php" to the variable include . However, rather than rolling your own template system, have you considered using something like Smarty ?

Answer 3

If the called code like for a footer that is canned, you might want to create the simple footer like you want then include:

<?php
readfile("yourfile.htm");
?>

Answer 4

Something like the following should do what you want:

index.php

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <!-- other css, scripts etc -->
  </head>
  <body>
    <!-- your main content here -->
    <?php include 'footer.html' ?>
  </body>
</html>

footer.html

<div class="footer box">
  <!-- your footer content here -->
</div>

when you load index.php in the browser, and "view source", you should see the contents shown above, but the <?php include "footer.html" ?> should be replaced with the content from the file "footer.html".

You should not see the php code itself when you view source through the web-browser. If you do see php code in "view source", this indicates that your server isn't configured to run php properly.

---

For an alternate approach, which loads the content from the browser, and which doesn't use php, I'll point you to this related question and answer .