Anuj Chauhan

How to keep header,footer and other common content in separate files while using HTML

Consider this example - you have 20 pages in your website and you have same header and footer in all of them , then what will you do ? Instead of copying and pasting the same code in all the pages , i suggest we should keep the common content in separate file and include these files to all the pages , by doing this we can modify the common content at on place and result will updated to all the pages automatically . To do this we will have to enable Server Side Includes ( SSI ) in web server .

You can check my posts to do so in Apache and IIS .

Now i presume that you have enabled the SSI in your web server . Let us code . We will keep all the content of common code in one file named header.shtml ( you must thing why shtml , shtml is to declare that this file may contain server side includes , i m declaring this so that if in future you want to add some SSI in header file also ) and will include this file in index.shtml , *.shtml so on to all the files where you want this code . 

Now we will add the following code to index.shtml ( .shtml extension is here to tell web server that it contains SSI ) where you want the header code to be included .

<!--#include virtual="header.shtml" -->

Remember 

1. <!-- #include virtual="header.shtml" --> is wrong because you gave a space in between <!-- & #include 

2. <!--#include virtual ="header.shtml" --> is wrong because you gave a space in between virtual & = 

3. <!--#include virtual="header.shtml"--> is wrong because you dint gave space in between .shtml" & -->

4. Keep in mind all the spaces as specified above before the remember heading .

Now as you will open the index.shtml all the content of header.shtml will be there in your file automatically.

HTML5 SSI, Server Side Include, HTML, Header, Footer