How to use a basic html code structure in multiple files

Question

I am learning how to program a basic website. The home page is my index.html that follow the basic structure:

<!doctype html>
<html lang="en">
  <head>

    <title>Hello, world!</title>

  </head>

  <body>
  </body>

  <footer>
  </footer>
</html>

Once I start to create new html files I just want to change the content of body tag keeping header and footer with the same content. Right now when I want to create a new html file I copy index.html with another name, for example posts.html, and change the content that I want. That hasn't been an effective way to program my website because every time when I need to make a change in index.html it is need to repeat all the changes to the others html files.

Are there ways to expand my web-pages preserving the contents of head and footer?

I know that Django allows the programmer to use the follow structure to preserve the basic aspects of the website:

{% block content %}
{% endblock %}

Nevertheless I am not using Django. So far I am just using HTML to create my webpages.

You'll want some sort of templating or bundling tool to handle this for you. There are many to choose from, all depending on your specific needs. There is no provision in HTML itself for importing other files. — Brad, Dec 07 '19 at 18:29
I would like somehow to import the basic structure to the other pages. every time I make a change on my index.html automatically the others pages will have the change once they are importing the basic structure. — Arduin, Dec 07 '19 at 18:57
There is an answer for you using only jquery (framework of JavaScript) : https://stackoverflow.com/a/18712605/12305676 — pensum, Dec 07 '19 at 19:34
Does this answer your question? [Make header and footer files to be included in multiple html pages](https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages) — pensum, Dec 07 '19 at 19:36
Yeah but that's quite a few http requests, you need one for `header.html`, one for `footer.html`, and one for jQuery (if the OP doesn't have it in their page). I would rather use server side stuff for this — Volper, Dec 07 '19 at 19:41
In plain html, no. There are a virtually infinite number of technologies for doing this though, but enumerating them all is out of scope for Stack Overflow. The basics are covered here: https://en.m.wikipedia.org/wiki/Web_template_system — meager, Dec 07 '19 at 19:43
@pensum I guess that answer you shared is close to my problem. I ll try to use JavaScript to solve my problem. — Arduin, Dec 08 '19 at 07:31

Volper · Accepted Answer · 2019-12-07T19:35:24.673

What I use for that is Pug, which is a template engine that allows you not only to write shorter and less repetitive markup, but also allows to embed (executed at compile time) js in it. And it's open source!

However, to set it up, you're going to need a node.js setup, which can take some time. But you can reuse that setup later for other sites, and improve it with other features like Sass or TypeScript for your desire.

How to use a basic html code structure in multiple files

1 Answers1