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

22. July 2013

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 , , , ,