Add header to all pages of website

Question

I have the following HTML in a file called header.HTML:

<HTML>
    <head>
        <link rel="stylesheet" type="text/css" href="Style.css">
    </head>
    <body>
        <div class="headerOutline">
        </div>
        <div class="buttons">
        <div>
    </body>
</HTML>

and the following HTML in the the main page:

<HTML>
    <head>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <title>Page 1</title>
        <script> 
        </script> 
    </head>
    <body>
    </body>
</HTML>

What I want to do is to include the header file in every page of my website.

I have tried following the instructions from:

Make header and footer files to be included in multiple html pages

and

Common Header / Footer with static HTML

But they are not loading into my browser. Maybe I am doing something wrong. This is a basic website on my home computer for learning purposes, so I am looking for client side code eg not PHP etc.

I can post the CSS if necessary, but I did not think it is relevant in this case.

CSS doesn't play a role here, so no need to post that. Post the javascript that's not working for you. — watery, Mar 10 '15 at 22:28
...and you shouldn't have closed html/body tags inside header... — sinisake, Mar 10 '15 at 22:31
Its far from clear what you are trying to achieve here. Embedding the file you showed us in the HTML will result in something which is NOT HTML. And you have given no explanation of why you do not simply edit the HTML. — symcbean, Mar 10 '15 at 22:34

score 0 · Answer 1 · answered Mar 10 '15 at 22:40

Your header.html file shouldn't contain anything but the content you want to include. No body tags or anything like that; you'll be including the partials in your main file's body.

<html>
  <head>
    <title></title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script> 
      $(function(){
        $("#header").load("header.html"); 
      });
    </script>
  </head>
  <body>
    <div id="header"></div>
  </body>
</html>

score 0 · Answer 2 · answered Mar 10 '15 at 22:47

The first problem I see is that you've included <html>, <body>, and <head> tags in both files. You'll want you index.html file to look something like this:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>Page 1</title>
  </head>
  <body>
    <header id="header"></header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
      $('#header').load('header.html');
    </script>
  </body>
</html>

Then in your header.html file:

<div class="headerOutline">
</div>
<div class="buttons">
<div>

Technically you can make the <header> tag whatever you'd like, such as a <div>, but this keeps your code semantic. The example you posted uses jQuery, so I went ahead and included it in the code for you. It's simply being pulled from Google's CDN.

The script before the closing </body> tag just tells jQuery to go find your header.html file and load it into the document within the element with an ID of #header. You'll be able to make changes to your header.html file and see those changes reflected anywhere that you'd loaded the header with jQuery.

Add header to all pages of website

2 Answers2