How do you make a single header and footer on separate HTML pages that then are displayed on each su-CodePudding

At a beginner level I am trying to make a frontend page that has a header and a footer on all pages. Each page can have an identical header and footer. In the header, I'd like to add a Bootstrap navbar (or similar) and in the footer, something similar. But rather than just copying that header and footer to each page I'd like to just make that a separate thing and insert it into each page when it loads. This way if I update the header or footer it updates on all pages.

In the past, I have done this with Python, but I am only using frontend for this project and I am only going to publish on GitHub (it's mostly for my own purposes).

I am using Visual Studio Code as my editor if this makes it any easier.

I will have CSS and JS folders too (if this makes any difference).

**Update Edit:

I have tried to do this, but I am missing something here.

This is what I attempted (after a quick Google search now I know what I am after):

<!--JQuery CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--Include Content-->
    <script>
        $(function () {
        var includes = $('[data-include]')
        $.each(includes, function () {
        var file = 'views/'   $(this).data('include')   '.html'
        $(this).load(file)
        })
        })
    </script>
</head>

<body>
    <header>
        <div data-include="header"></div>
    </header>

It has been a while since I have done this, so I am rusty, but this doesn't seem to be working for some strange reason.

CodePudding user response：

There are several ways to follow it, at a beginner level you can have a scheme where the content is dynamic, that is, the Header and Footer sections are filled with a variable or code insertion, at an advanced level there are template engines, if you want to start, with php is configured very easily

CodePudding user response：

I used the W3 method: https://www.w3schools.com/HOWTO/howto_html_include.asp

So far it is not working with both header and footer, only header is working. I am unsure why. Will be the next problem solve.