: Include header and footer html files into another html file [ERROR] I'd like to know how to include my header.html and footer.html in the rest of my html files, so if I had to change something

@Si4351233

There are two ways to do this.

One is server side includes which involves configuring your Apache server to support server side includes and then adding SSI commands to your HTML pages like <!--#include virtual="/footer.html" --> to signal to Apache that the file /footer.html has to be included at that spot. This involves a little processing on Apache as it has to effectively stitch the final page together based on the SSI commands being added. I have worked with SSI's in the past and while I can't identify a particular fault with them (they do in fact serve a purpose and can be useful depending on the use case) I found that it could be difficult at times. One thing to note here is that the default settings are for any web page that has SSI commands in it needs to be named with the file extension .shtml in order for Apache to identify that the page has server side include commands. Servers can be configured to treat all HTML pages as potentially having server side includes however this is generally considered bad practice as it increases the load on the server maginally but measurably as the Apache process has to go through each html page that it serves to check if the page has any server side include commands. On shared hosting generally you will be confined to using the standard .shtml file extension but some shared hosting providers will let you define what file extensions to treat as containing server side includes.

The other way (this is the way I tend to prefer these days) is to use AJAX. In the page that I am trying to import given HTML into I specify a location in the document (usually denoted by a <div> tag or something similar) and give it a reference (like an id attribute) to uniquely identify it on the page, and then at the end of the page load run some javascript to make an AJAX call back to the server to get the appropriate HTML to add. There are in fact libraries (like jQuery) which make this an exceptionally easy one line command to do. On the one hand this does not depend on server side includes being supported on your server, but on the other side the page will be missing the header and footer you are trying to inject into it until such time as the AJAX loading of the extra files has completed. Your example of the W3Schools method is loosely based on their own variation of this same procedure of using AJAX to import the common files into the pages. A few more advantages of the AJAX method include speedier page load times (as the page is loaded with less content to begin with and additional content is loaded after page load and injected into the page structure, it is somewhat easier to manipulate files being injected using AJAX as the files can be manipulated much the same as standard HTML can but you can do the manipulation before the HTML is visible on the page, and you can also be selective over what is being added. As an example the jQuery.load() API enables you to choose a child element from the page being requested over AJAX so that only that element and children elements under it are added, instead of adding the whole page and removing elements after the fact, which also allows you to avoid the issue of needing to have a different file for each variation that may be called upon.

Even though you haven't made mention of the SEO implications I will raise them as they often come up in queries such as these and the answer is that there would be no SEO implications. As Google is able to parse javascript and identify where content is being loaded through an AJAX connection functionally the SEO aspect will remain the same. If you where to use server side includes, while there is a minor increase in the time to first byte (which is a signal that Google uses in its ranking algorithms) unless your SSI's are incredibly complex with a large number of SSI commands per page and multi level includes (such as footer.html being included on all pages, but footer.html also has SSI include commands) the marginal increase in time to first byte is unlikely to make a difference to SEO ranking. There is no hard and fast way to measure and quantify this though as it depends on the extent to which SSI commands are used, the nature of the SSI commands themselves, and the amount of work that Apache has to do in order to stitch the page together.

Which one you use is largely a case of personal preference and experience. Sometimes an extremely restrictive shared hosting environment will require you to use AJAX instead of server side includes however many of the larger shared hosting providers allow server side includes as standard.

Delving into how to incorporate either technology is someone beyond the context of this post (whole books can and have been written on both technologies) but some useful places to start looking are...

httpd.apache.org/docs/current/howto/ssi.html httpd.apache.org/docs/current/mod/mod_include.html http://api.jquery.com/load/ www.w3schools.com/xml/ajax_intro.asp https://api.jquery.com/category/ajax/


Additional Note 1
As an additional point as @Abu Nooh points out above PHP is an example of another language which can do what you are trying to do and client's can disable javascript which would prevent the AJAX method from working for those clients, however in those situations you can use a noscript tag to identify that your site does in fact use javascript. I don't mention PHP in my answer as PHP interprets everything in the file before sending it to the buffer to be outputted to the users browser which adds extra processing time (minimal to be sure but there nonetheless.

Vote Up Vote Down

@Barnes591

Here's how you would do it with php.

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>


This is the content of footer.php

<?php
echo "<p>Copyright &copy; 1999-" . date("Y") . " W3Schools.com</p>";
?>


More info here: www.w3schools.com/php/php_includes.asp
Unlike html the files in php end with .php just change your html files to php by changing the file extension. Later on you can use rewrite to change how the extension appears on browsers if that bothers you. But that's another topic on its own.

I'd avoid using the html javascript way because it's not supported by all browsers and the user can turn off javascript on their browser. That'll render it broken and ineffective.

Vote Up Vote Down