3

I'm making a header using HTML and Bootstrap and I want the header to appear on all pages of my site. Is there a way to do something similar to a CSS style sheet but instead of CSS, reusing HTML?

David M
  • 195
  • 3
  • 13
  • If you're using a server-side scripting language like PHP, you can include your header snippet of HTML in multiple files. – WillardSolutions Apr 18 '16 at 21:23
  • I'm just using HTML, CSS, Bootstrap, JS and jQuery, no server side languages (to my limited knowledge) – David M Apr 18 '16 at 21:24
  • Take a look at this question: http://stackoverflow.com/questions/676394/how-to-include-an-html-page-into-another-html-page-without-frame-iframe – WillardSolutions Apr 18 '16 at 21:25
  • Possible duplicate of [Include another HTML file in a HTML file](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) – Iłya Bursov Apr 18 '16 at 21:29
  • Given that you are learning I'll suggest you go to *Angular* OR *React*. By the time you learn HTML CSS ... you will realise that using a framework like the above mention will save u a lot of time. – T04435 Jun 21 '19 at 02:49

4 Answers4

5

The simplest way I believe is to use jQuery.

See jQuery docs here

one.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#header").load("two.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="header"></div>
  </body> 
</html>

two.html:

<p> Put your header in here </p>
spencerwise
  • 76
  • 4
1

If you don't want to store jquery, you can use a CDN

<html> 
  <head> 
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>$(document).ready(function () { $("header").load("assets/header.html"); });</script>
  </head> 

  <body> 
     <header></header> 
  </body> 
</html>
0

Javascript as on: {% extends "xxx.html" %}

Al Martins
  • 431
  • 5
  • 13
-2

You can use an <iframe> to change the content that is displayed, and only code the surrounding header/footer/etc. only once. There seems to be some uneasy feelings about using them floating around, so I would do some research on that before I committed to it.

HTML include is a recent feature you could try as well. Otherwise, it's gonna be good ol' fashioned ctrl-c ctrl-v.

NAMS
  • 983
  • 7
  • 17