How to be efficient and save time + energy when working with multiple html pages (dealing with Nav and Footers).

Question

+ index.html
+ A.html
+ B.html
+ FOLDER A
+ ok.html
+ no.html

So, when I'm working with _navs and footers i usually just focus on the index.html, once the nav and footer looks good, then I'm ready to put them(nav, & footer) on all the other pages.
Let's do just the footer for this example.
– I copy the footer content from index.html. Paste in A.html and B.html. And on other pages if I I need to.

If this was just a one time thing, it probably wouldn't hurt to just take my approach (copy and paste on each page). But I sometimes find myself wanting to change things on the footer content (for example).

Maybe I just realized I got a spelling wrong, or I want to add a new link in the footer: well, that means i need to do (change) the same thing on all the pages that I have the footer on.

^^ I'm wondering if there's a better approach to this. Would using JavaScript be a good idea (create the elements in js, then just put _script src = "footer.js"_ on the pages u want z footer.)?

Let me know what you guys think about this.

Answer 1

Ginfio Use HTMLElement to build reusable custom tag components such as <site-header> and <site-footer>

Once the custom tags are formed, just append each html pages with these tags with script tag of src custom-tags.js

https://code.sololearn.com/WWz6of1RuvOH/?ref=app

Answer 2

Ginfio

There is 2 ways

1 - create seperate files for header and footer and load them in each html files using JavaScript or jQuery.

2 - write all code of header and footer in JS and append in a div of header and footer.

According to me 1st approach is better.

PHP and JSP provides better option to include files without using JavaScript.