how to add a header to all html pages (preferably without javascript)

Question

I was wondering how to add a header (or just any html file) into another html file. I tried using iframes, but it just redirected what was inside of the iframe. Once I finish my website, I will probably have a lot of pages, so it will be very useful to just be able to add a header that can be updated by only changing one file, instead of having to change it on all of the pages. Does anyone know how to do this? Thanks in advance.

You can do this with a server language like PHP or Python, or another. Here is a tutorial with PHP: http://www.tizag.com/phpT/include.php — , Sep 16 '14 at 03:35
Possible duplicate of http://stackoverflow.com/questions/418503/common-header-footer-with-static-html — klog, Sep 16 '14 at 03:45

score 7 · Answer 1 · answered Sep 16 '14 at 05:12

With jQuery:

<html>
    <head>
        <script src="jquery.js"></script>
        <script>
            $(function(){
                $("#includedContent").load("b.html");
            });
        </script>
    </head>
    <body>
    <div id="includedContent"></div>
    </body>
</html>

With JavaScript without jQuery:

<html>
    <body>
        <script src="b.js"></script>
    </body>
</html>

b.js:

document.write('\
\
    <h1>This is my include file</h1>\
\
');

With PHP:

<?php include('b.html');?>

For this to work you may have to modify the .htaccess file on your web server so php may be interpreted within .html files. You should see, or add, this within your .htaccess file:

RemoveHandler.html
AddType application/x-httpd-php .php .html

With Service Side Includes (SSI):

<!--#include virtual="a.html" -->

With HTML5:

<object name="foo" type="text/html" data="foo.inc"></object>

Alternatively:

<embed type="text/html" src="foo.inc">

ChrisTsek · Answer 2 · 2017-09-06T17:49:08.087

I have searched for no javascript way but I couldn't make it work. Here is the simplest way of including HTML

you can create html files for header, footer, content, anything you want to have in a separate file and all you need to do is:

1.put this in your page

<script src="https://www.w3schools.com/lib/w3.js"></script>

you could also download the w3.js and upload it to your server files

<script src="/lib/w3.js"></script>

2.then where ever you want your html code, from the separate file, to be included to your page:

<div w3-include-html="header.html"></div>

for example

<a href="google.com">Google</a> 
<div w3-include-html="footer.html"></div>
<h1>Title of current page</h1>
<div w3-include-html="content.html"></div>

include the next code anywhere after the previous "include" codes
```
<script>w3.includeHTML();</script>
```

source w3schools.com How TO - Include HTML

so this is how it can look

  <script src="https://www.w3schools.com/lib/w3.js"></script>
  <div w3-include-html="header.html"></div>
  <script>w3.includeHTML();</script>

how to add a header to all html pages (preferably without javascript)

2 Answers2