That’s a good question. I’m not aware of anything like that built into HTML, but there are lots of HTML templating engines built with JavaScript, though you don’t need to know much JavaScript to use some of them.
For example Handlebars. Let’s say you have some header and footer HTML that you want to reuse. You can create Handlebars templates for each.
header.handlebars
<header>My Page</header>
footer.handlebars
<footer>Copyright © 2021</footer>
You compile these into header.precompiled.js and footer.precompiled.js using the Handlebars compiler (this assumes that you have node installed on your system).
npx handlebars header.handlebars -f header.precompiled.js
npx handlebars footer.handlebars -f footer.precompiled.js
Now you can insert this HTML into all of your pages, for example…
<html>
<head>
<title>Using Handlebars</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.runtime.min.js" integrity="sha512-1JsLHOJ3aKKxY96SA64yDTGQXo46wjivsGj6LiZGQaz0V6cGpGjfFOm1fnH9WkNwf8FFaIU8jVrvAjSESKESww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="header.precompiled.js"></script>
<script src="footer.precompiled.js"></script>
<script>
const header = Handlebars.templates.header();
const footer = Handlebars.templates.footer();
window.onload = (event) => {
document.getElementById('header-goes-here').outerHTML = header;
document.getElementById('footer-goes-here').outerHTML = footer;
}
</script>
</head>
<body>
<div id="header-goes-here"></div>
<section>
The header and footer are using Handlebars templates.
</section>
<div id="footer-goes-here"></div>
</body>
</html>
There’s a lot going on there! The first script tag…
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.runtime.min.js" integrity="sha512-1JsLHOJ3aKKxY96SA64yDTGQXo46wjivsGj6LiZGQaz0V6cGpGjfFOm1fnH9WkNwf8FFaIU8jVrvAjSESKESww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
loads the Handlebars runtime. The next script tags…
<script src="header.precompiled.js"></script>
<script src="footer.precompiled.js"></script>
load your header and footer templates. And this part…
<script>
const header = Handlebars.templates.header();
const footer = Handlebars.templates.footer();
window.onload = (event) => {
document.getElementById('header-goes-here').outerHTML = header;
document.getElementById('footer-goes-here').outerHTML = footer;
}
</script>
inserts your HTML templates into your page at the right places, which are identified by their id. I use header-goes-here and footer-goes-here for clarity but you could use whatever ids make sense for you. So, the header template replaces this div…
<div id="header-goes-here"></div>
And the footer template replaces this div…
<div id="footer-goes-here"></div>
And so what you end up with is…
<body>
<header>My Page</header>
<section>
The header and footer are using Handlebars templates.
</section>
<footer>Copyright © 2021</footer>
</body>
But is this more trouble than it’s worth? In this example, the header and footer templates don’t have much HTML, and we end up trading a little bit of HTML for a moderate amount of JavaScript. But maybe you have more elaborate HTML? Sometimes it’s nice to be able to maintain a single bit of HTML rather than having to update the same HTML in multiple pages.
This is just a small example of what Handlebars is capable of, and there are lots of other HTML templating solutions out there. But maybe this gives you an idea of what’s possible.
