CODEWITHSUNDEEP
htmltwitter-bootstrap
David M
David M

Reputation: 305

How to reuse HTML across entire site

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?

Upvotes: 3

Views: 2855

Answers (4)

Al Martins
Al Martins

Reputation: 436

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

Upvotes: 0

user6848902
user6848902

Reputation:

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>

Upvotes: 1

spencerwise
spencerwise

Reputation: 76

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>

Upvotes: 5

NAMS
NAMS

Reputation: 991

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.

Upvotes: -2

Related Questions