Include option in HTML

Question

I'm working on a navigation bar similar to this website and google, and lets say i would like to make more sites with the same layout. How would i go about doing this with html? I know that php has:

<?php include  "file name"; ?>

Is there a way to do something like that in HTML document?

Answer 1

HTML is not a server-side language, it's just a markup language. It does not offer any way to include the contents of a different page in your HTML code. HTML simply doesn't support it.

If you're willing to use a library such as jQuery, then this will be an easy task. You can use the jQuery .load() method to fetch the contents of your HTML file and then inject it the HTML DOM.

$(document).ready(function() {
    $('#someDiv').load('/path/to/file.html');
});

Note that remote files won't work because of the Same Origin Policy. Also, note that it's a bad idea if you care about SEO. The search engine spiders won't see your actual HTML code, and they might miss out important parts of your website.

The best way to do this would be to use a server-side language. If you're already serving dynamic content, then it makes more sense to do so. Server-side scripting runs on the server machine and then the results of that scripting, generally HTML markup are then sent out to the client. The difference is that the HTML markup is generated before pageload, not during or after, as is the case with the method shown above.

Answer 2

"Is there a way to do something like that in HTML document?"

Yes there is an HTML equivalent (if I can say) to include files, and it's called Server-side Includes (SSI) which uses the .shtml file extension, however this is an Apache feature. Yet, from a recent finding, it can run on Windows servers. Consult Microsoft's Developer Network for more information on the usage of SSI and this page also on Microsoft's IIS.net.

The syntax is: (no space between the <!-- and the #include...)

<!--#include virtual="/includes/file.shtml" -->

This would look and fetch a file called file.shtml to the root and inside the "includes" folder.

Note: This can be any folder you want it to be.

You can also include different file extensions such as .htm .html .txt and even another .shtml file.

I manage a few Websites with that particular file extension, and the benefit of including .shtml files, is that you can also do more includes inside those, but not with the other file extensions I already listed.

However, there is an exception to this rule. You can tell the server to treat .html or .htm to run as .shtml just as long as you use the

AddHandler server-parsed .html
AddHandler server-parsed .shtml
AddHandler server-parsed .htm

Apache commands inside an .htaccess file and placed in the root of your server.

Back to the matter at hand. You can use it anywhere in the document you wish to include a file in.

For more information on Server-side Includes and other available options, visit the Wikipedia Website, or Google the term "Server-side Includes (SSI)".

• http://en.wikipedia.org/wiki/Server_Side_Includes

Answer 3

Just make your HTML files run through a PHP parser, I do that for all my sites so things like menus and other repeating sections can just be updated once. You do this with your .htaccess file.

This will make all .htm and .html files be run through the PHP parser as well.

<FilesMatch "\.(htm|html)$">
    SetHandler application/x-httpd-php
</FilesMatch>

Then you just use the same method you mentioned in your original post. Whatever you include will be processed by the PHP parser, then sent to the browser, which will interpret the HTML.

Note that PHP files can hold anything in them, only the parts inside <?php ?> tags will actually be processed by the PHP parser. So I have section that are all HTML, except for one small section that has something like a year. The below is how my websites will never have their copyright be out of date, even if the website is not maintained.

<p>
    Copyright<sup>&copy;</sup> NAME. All Rights Reserved. <?php echo date("Y"); ?>.
</p>

Answer 4

<frameset cols="25%,50%,25%">
  <frame src="www.google.com">
  <frame src="www.facebook.com">
  <frame src="www.something.ocm">
</frameset>

FRAMETAG is not supported in HTML5! Beaware

In W3C Validation it will throw an error, but in real it will work.