How do I base an html page off another html page?

Question

I want to use an html page with common code for all the other html pages. I know how to do with with css but I tried and failed with html. The code I am using and changing constantly is present on all the other pages so it's annoying to continually go through each page to change it. How can I do this?

@Muskratis You would need to use a templating system like Twig or a combination of HTML and PHP (include function) to achieve this. — Mike Hermary, Jan 05 '20 at 21:25
Okay thank you for letting me know. I couldn't find anything anywhere for just html so I will now look for those — Muskratis, Jan 05 '20 at 21:26
if it's only HTML you can do like explained here: [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) I'm not saying it is a good solution! Just saying it would work. If you can render the HTML on the server side that would be the good way to go — caramba, Jan 05 '20 at 21:29

score 0 · Answer 1 · answered Jan 05 '20 at 21:26

you can use iframe to split the content of the page. for example if the header is always the same you can place it in a iframe so if you modify it, chenges will affect all the pages. but I think this method is obsolete.

you could convert your html pages into a php instead and split the static code in another php file so in all pages you could include the static content.

score 0 · Accepted Answer · answered Jan 05 '20 at 21:27

you can use this plain html + js alternative : https://www.w3schools.com/howto/howto_html_include.asp

with example : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2

See the example :

    <!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>

Thank you this was exactly what I was looking for – Muskratis Jan 06 '20 at 03:06 — Muskratis, Jan 06 '20 at 03:06

score 0 · Answer 3 · answered Jan 05 '20 at 21:28

I am assuming you are just getting started. So here are high level the three options you have in order of what is most easy to implement (not necessarily what is technically the best):

Use iframes. These allow you to load one HTML page into another, so you can have an outer page that has the common content and the changing content goes into the iframe.
Use JavaScript, you could have a basic page and then load the other content using JavaScript. A very simple way is to use the jQuery library which has a load() function that could do what you need.
Generate the HTML dynamically on the server. There are a lot of different ways. The easiest would be PHP.

How do I base an html page off another html page?

3 Answers3