Common Header Footer with static HTML

Question

Is there a decent way with static HTML XHTML to create common header footer files to be displayed on each page of a site  I know you can obviously do this with PHP or server side directives  but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you   Edit  All very good answers and was what I expected   HTML is static  period   No real way to change that without something running server side or client side   I ve found that Server Side Includes seem to be my best option as they are very simple and don t require scripting

User · Answer

The best solution is using a static site generator which has templating includes support  I use Hammer for Mac  it is great  There s also Guard  a ruby gem that monitors file changes  compile sass  concatenate any files and probably does includes

User · Answer

The best solution is using a static site generator which has templating includes support  I use Hammer for Mac  it is great  There s also Guard  a ruby gem that monitors file changes  compile sass  concatenate any files and probably does includes

User · Answer

HTML frames  but it is not an ideal solution  You would essentially be accessing 3 separate HTML pages at once   Your other option is to use AJAX I think

User · Answer

You could use a task runner such as gulp or grunt   There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file  You can even pass values through to your partials   https   www npmjs com package gulp-file-include   lt  DOCTYPE html gt   lt html gt     lt body gt      include    header html       include    main html      lt  body gt   lt  html gt    an example of a gulp task   var fileinclude   require  gulp-file-include        gulp   require  gulp         gulp task  html   function             return gulp src     src html views   html                 pipe fileInclude                   prefix                        basepath   src html                               pipe gulp dest    build

User · Answer

you can do this easily using jquery  no need of php for such a simple task  just include this once in your webpage     function            data-load    each function              this  load   this  data  load    function                             now use data-load on any element to call its contents from external html file you just have to add line to your html code where you want the content to be placed   example    lt nav data-load  sidepanel html  gt  lt  nav gt   lt nav data-load  footer html  gt  lt  nav gt

User · Answer

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server  no  you d need at least SSI

User · Answer

You can do it with javascript  and I don t think it needs to be that fancy   If you have a header js file and a footer js   Then the contents of header js could be something like  document write   lt div class  header  gt header content lt  div gt  etc        Remember to escape any nested quote characters in the string you are writing  You could then call that from your static templates with   lt script type  text javascript  src  header js  gt  lt  script gt    and similarly for the footer js   Note  I am not recommending this solution - it s a hack and has a number of drawbacks  poor for SEO and usability just for starters  - but it does meet the requirements of the questioner

User · Answer

You can do it with javascript  and I don t think it needs to be that fancy   If you have a header js file and a footer js   Then the contents of header js could be something like  document write   lt div class  header  gt header content lt  div gt  etc        Remember to escape any nested quote characters in the string you are writing  You could then call that from your static templates with   lt script type  text javascript  src  header js  gt  lt  script gt    and similarly for the footer js   Note  I am not recommending this solution - it s a hack and has a number of drawbacks  poor for SEO and usability just for starters  - but it does meet the requirements of the questioner

User · Answer

The simplest way to do that is using plain HTML   You can use one of these ways    lt embed type  text html  src  header html  gt    or    lt object name  foo  type  text html  data  header html  gt  lt  object gt

User · Answer

No  Static HTML files don t change  You could potentially do this with some fancy Javascript AJAXy solution but that would be bad

User · Answer

The only way to include another file with just static HTML is an iframe  I wouldn t consider it a very good solution for headers and footers  If your server doesn t support PHP or SSI for some bizarre reason  you could use PHP and preprocess it locally before upload  I would consider that a better solution than iframes

User · Answer

You could use a task runner such as gulp or grunt   There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file  You can even pass values through to your partials   https   www npmjs com package gulp-file-include   lt  DOCTYPE html gt   lt html gt     lt body gt      include    header html       include    main html      lt  body gt   lt  html gt    an example of a gulp task   var fileinclude   require  gulp-file-include        gulp   require  gulp         gulp task  html   function             return gulp src     src html views   html                 pipe fileInclude                   prefix                        basepath   src html                               pipe gulp dest    build

User · Answer

Since HTML does not have an  include  directive  I can think only of three workarounds   Frames Javascript CSS   A little comment on each of the methods   Frames can be either standard frames or iFrames  Either way  you will have to specify a fixed height for them  so this might not be the solution you are looking for   Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect  Off the top of my head however I can think of two ways    Full-blown AJAX request  which requests the header footer and then places them in the right place of the page   lt script type  text javascript  src  header js  gt  which has something like this in it  document write  My header goes here      Doing it via CSS would be really an abuse  CSS has the content property which allows you to insert some HTML content  although it s not really intended to be used like this  Also I m not sure about browser support for this construct

User · Answer

There are three ways to do what you want  Server Script  This includes something like php  asp  jsp     But you said no to that  Server Side Includes  Your server is serving up the pages so why not take advantage of the built in server side includes  Each server has its own way to do this  take advantage of it   Client Side Include  This solutions has you calling back to the server after page has already been loaded on the client

User · Answer

The most practical way is to use Server Side Include  It s very easy to implement and saves tons of work when you have more than a couple pages

User · Answer

Since HTML does not have an  include  directive  I can think only of three workarounds   Frames Javascript CSS   A little comment on each of the methods   Frames can be either standard frames or iFrames  Either way  you will have to specify a fixed height for them  so this might not be the solution you are looking for   Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect  Off the top of my head however I can think of two ways    Full-blown AJAX request  which requests the header footer and then places them in the right place of the page   lt script type  text javascript  src  header js  gt  which has something like this in it  document write  My header goes here      Doing it via CSS would be really an abuse  CSS has the content property which allows you to insert some HTML content  although it s not really intended to be used like this  Also I m not sure about browser support for this construct

User · Answer

The most practical way is to use Server Side Include  It s very easy to implement and saves tons of work when you have more than a couple pages

User · Answer

There are three ways to do what you want  Server Script  This includes something like php  asp  jsp     But you said no to that  Server Side Includes  Your server is serving up the pages so why not take advantage of the built in server side includes  Each server has its own way to do this  take advantage of it   Client Side Include  This solutions has you calling back to the server after page has already been loaded on the client

User · Answer

No  Static HTML files don t change  You could potentially do this with some fancy Javascript AJAXy solution but that would be bad

User · Answer

HTML frames  but it is not an ideal solution  You would essentially be accessing 3 separate HTML pages at once   Your other option is to use AJAX I think

User · Answer

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server  no  you d need at least SSI

User · Answer

The only way to include another file with just static HTML is an iframe  I wouldn t consider it a very good solution for headers and footers  If your server doesn t support PHP or SSI for some bizarre reason  you could use PHP and preprocess it locally before upload  I would consider that a better solution than iframes

User · Answer

You can do it with javascript  and I don t think it needs to be that fancy   If you have a header js file and a footer js   Then the contents of header js could be something like  document write   lt div class  header  gt header content lt  div gt  etc        Remember to escape any nested quote characters in the string you are writing  You could then call that from your static templates with   lt script type  text javascript  src  header js  gt  lt  script gt    and similarly for the footer js   Note  I am not recommending this solution - it s a hack and has a number of drawbacks  poor for SEO and usability just for starters  - but it does meet the requirements of the questioner

User · Answer

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server  no  you d need at least SSI

User · Answer

There are three ways to do what you want  Server Script  This includes something like php  asp  jsp     But you said no to that  Server Side Includes  Your server is serving up the pages so why not take advantage of the built in server side includes  Each server has its own way to do this  take advantage of it   Client Side Include  This solutions has you calling back to the server after page has already been loaded on the client

User · Answer

HTML frames  but it is not an ideal solution  You would essentially be accessing 3 separate HTML pages at once   Your other option is to use AJAX I think

User · Answer

There are three ways to do what you want  Server Script  This includes something like php  asp  jsp     But you said no to that  Server Side Includes  Your server is serving up the pages so why not take advantage of the built in server side includes  Each server has its own way to do this  take advantage of it   Client Side Include  This solutions has you calling back to the server after page has already been loaded on the client

User · Answer

HTML frames  but it is not an ideal solution  You would essentially be accessing 3 separate HTML pages at once   Your other option is to use AJAX I think

User · Answer

The most practical way is to use Server Side Include  It s very easy to implement and saves tons of work when you have more than a couple pages

User · Answer

The simplest way to do that is using plain HTML   You can use one of these ways    lt embed type  text html  src  header html  gt    or    lt object name  foo  type  text html  data  header html  gt  lt  object gt

User · Answer

You can try loading them via the client-side  like this    lt  DOCTYPE html gt   lt html gt     lt head gt       lt  --     -- gt     lt  head gt     lt body gt        lt div id  headerID  gt   lt  -- your header -- gt   lt  div gt       lt div id  pageID  gt   lt  -- your header -- gt   lt  div gt       lt div id  footerID  gt   lt  -- your header -- gt   lt  div gt        lt script gt            headerID   load  header html              pageID   load  page html              footerID   load  footer html         lt  script gt     lt  body gt   lt  html gt    NOTE  the content will load from top to bottom and replace the content of the container you load it into

User · Answer

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server  no  you d need at least SSI

User · Answer

JQuery load   function can use for including common header and footer  Code should be like  lt script gt         quot  header quot   load  quot header html quot           quot  footer quot   load  quot footer html quot     lt  script gt   You can find demo here

User · Answer

You can try loading them via the client-side  like this    lt  DOCTYPE html gt   lt html gt     lt head gt       lt  --     -- gt     lt  head gt     lt body gt        lt div id  headerID  gt   lt  -- your header -- gt   lt  div gt       lt div id  pageID  gt   lt  -- your header -- gt   lt  div gt       lt div id  footerID  gt   lt  -- your header -- gt   lt  div gt        lt script gt            headerID   load  header html              pageID   load  page html              footerID   load  footer html         lt  script gt     lt  body gt   lt  html gt    NOTE  the content will load from top to bottom and replace the content of the container you load it into

User · Answer

you can do this easily using jquery  no need of php for such a simple task  just include this once in your webpage     function            data-load    each function              this  load   this  data  load    function                             now use data-load on any element to call its contents from external html file you just have to add line to your html code where you want the content to be placed   example    lt nav data-load  sidepanel html  gt  lt  nav gt   lt nav data-load  footer html  gt  lt  nav gt

User · Answer

The only way to include another file with just static HTML is an iframe  I wouldn t consider it a very good solution for headers and footers  If your server doesn t support PHP or SSI for some bizarre reason  you could use PHP and preprocess it locally before upload  I would consider that a better solution than iframes

User · Answer

You can do it with javascript  and I don t think it needs to be that fancy   If you have a header js file and a footer js   Then the contents of header js could be something like  document write   lt div class  header  gt header content lt  div gt  etc        Remember to escape any nested quote characters in the string you are writing  You could then call that from your static templates with   lt script type  text javascript  src  header js  gt  lt  script gt    and similarly for the footer js   Note  I am not recommending this solution - it s a hack and has a number of drawbacks  poor for SEO and usability just for starters  - but it does meet the requirements of the questioner

User · Answer

Since HTML does not have an  include  directive  I can think only of three workarounds   Frames Javascript CSS   A little comment on each of the methods   Frames can be either standard frames or iFrames  Either way  you will have to specify a fixed height for them  so this might not be the solution you are looking for   Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect  Off the top of my head however I can think of two ways    Full-blown AJAX request  which requests the header footer and then places them in the right place of the page   lt script type  text javascript  src  header js  gt  which has something like this in it  document write  My header goes here      Doing it via CSS would be really an abuse  CSS has the content property which allows you to insert some HTML content  although it s not really intended to be used like this  Also I m not sure about browser support for this construct

User · Answer

The only way to include another file with just static HTML is an iframe  I wouldn t consider it a very good solution for headers and footers  If your server doesn t support PHP or SSI for some bizarre reason  you could use PHP and preprocess it locally before upload  I would consider that a better solution than iframes

User · Answer

No  Static HTML files don t change  You could potentially do this with some fancy Javascript AJAXy solution but that would be bad

User · Answer

The most practical way is to use Server Side Include  It s very easy to implement and saves tons of work when you have more than a couple pages

User · Answer

JQuery load   function can use for including common header and footer  Code should be like  lt script gt         quot  header quot   load  quot header html quot           quot  footer quot   load  quot footer html quot     lt  script gt   You can find demo here

User · Answer

Since HTML does not have an  include  directive  I can think only of three workarounds   Frames Javascript CSS   A little comment on each of the methods   Frames can be either standard frames or iFrames  Either way  you will have to specify a fixed height for them  so this might not be the solution you are looking for   Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect  Off the top of my head however I can think of two ways    Full-blown AJAX request  which requests the header footer and then places them in the right place of the page   lt script type  text javascript  src  header js  gt  which has something like this in it  document write  My header goes here      Doing it via CSS would be really an abuse  CSS has the content property which allows you to insert some HTML content  although it s not really intended to be used like this  Also I m not sure about browser support for this construct

User · Answer

No  Static HTML files don t change  You could potentially do this with some fancy Javascript AJAXy solution but that would be bad

[html] Common Header / Footer with static HTML

Examples related to html