Bulk editing HTML on multiple pages?

Question

For example, if I'm building a page header with a menu that will appear on every single page of a website, if and when I want to make changes to the menu on every page, is there a way to implement this change on every page without having to edit every single HTML page?

Let's say my menu has 5 tabs and at a later date I want to add a 6th tab, or remove a tab, is there an efficient way of doing this without having to manually edit the HTML on every single page?

you can.t do it with html only.YOu can use angular for front end and if using php for html coding also then go with require() or include() — Adesh Kumar, Jul 02 '18 at 11:31

score 1 · Answer 1 · answered Jul 02 '18 at 10:11

HTML itself doesn't provide such a mechanism, though SGML, the language in which the HTML element vocabulary is/was originally specified, does in the form of entities/entity references. Using SGML entities, you'd typically create an SGML file containing just your menu, and then pull-in that file from multiple individual page content files:

<!-- content of menu.sgml file -->
<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <!-- ... further menu items -->
  </ul>
</nav>

<!-- content of page.sgml pulling-in menu.sgml -->
<!DOCTYPE html [
  <!-- this declares the "menu" entity -->
  <!ENTITY menu SYSTEM "menu.sgml">
]>
<html>
  <head>
    <title>Menu demo</title>
  </head>
  <body>
    <!-- this pulls-in menu.sgml as if it were part
         of page.sgml directly --> 
    &menu
    <main>
      <h2>Heading</h2>
      <p>Main content of your page</p>
    </main>
  </body>
</html>

Now you'd only edit menu.sgml and have your updated menu content always up-to-date in any page files referencing menu.sgml. You can even leave out the declaration for menu (and the whole DOCTYPE document prolog) since SGML resolves the &menu entity reference to a file of that name in the same directory as the referencing file by default.

Note: browsers don't implement SGML. To make use of SGML in browsers (and/or on the server side as well when using node.js), you can use my sgmljs.net SGML parser/lib; see http://sgmljs.net/docs/sgmlrefman.html#general-entities for discussion of relevant entity techniques.

Commonly used server-side template libs such as Jade, pug, handlebars, mustache, etc. all have their own mechanisms called partials or includes to get functionality more or less equivalent to SGML general entities.

score 0 · Answer 2 · answered Jul 02 '18 at 11:24

If your page is also using PHP you could add it with the help of the include statement there.

Otherwise here is a JavaScript solution:

menu.html

<a href="a.html">Start</a><br>
<a href="b.html">Page 2</a><br>
<a href="c.html">Page 3</a><br>

script.js

<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>

Your "normal" files

<div w3-include-html="menu.html"></div> <!-- put that line where you want to include the HTML. -->

<script>
includeHTML();
</script> <!-- Put that at the end of your file. -->

From here: https://www.w3schools.com/howto/howto_html_include.asp

Bulk editing HTML on multiple pages?

2 Answers2