Add HTML to Page with JS, PHP, or SSI Includes
The reason to use .js file includes to add HTML to a page is that you do not have to upload it to test it—your local server will do. That's the only reason, since 5% of visitors have JavaScript turned off and will not get the include. But here's how you do it:
Put <script language="JavaScript" src="include.js"></script> in the head section of the HTML code. (Although you do not need to name it include. Just make sure it ends in the .js extension). The include is really just an external js file but it functions as an include. The text in our example is simply the text written to the page from the include.js file using document.write(). Here is the entire include.js file (do not use JavaScript tags):
document.write("<div style='position:absolute;top:300px'><p>Here is the text written to the page from the include.js file using document.write(). It has no head, body, or html tags. Just the JavaScript code.</p></div>");
Try it: add-html-to-page-with-js-include.html
The reason to use .shtml files to include HTML on a page is that it works as long as your server allows it. The reasons not to use this method are: some free hosts do not allow it, and you have to upload the files to test them. But here's how you do it:
Create an HTML include file, such as 1bunchastuff.html:
<p>Here is the text in the 1bunchastuff.html include file. It has no head, body, or html tags. Just the html code.</p>
That's the whole file—do NOT use head, body, or html tags. Now here's how to get your shtml file to let you include HTML on a page using 1bunchastuff.html: Put
<!--#include virtual="1bunchastuff.html" --> in the body section of the HTML code of your shtml file.
Try it: ssi.shtml
The reason to use .php files to include HTML on a page is that it works as long as your server has PHP—which nearly all do. The reasons not to use this method are: just in case your server has no PHP, and you have to upload the files to test them. But here's how you do it: Put <?php include("1bunchastuff.html"); ?> in the body section of the HTML code of your php file. The HTML file is the include that gets included.
Try it: add-html-to-page-with-php-include.php
Includes are great for making files that you add to all pages on your site, like navigation or side bar. Then when you wish to change the navigation or side bar on all pages, simply edit the include file and all of your site's pages will reflect this change.