I'm not new to programming, but I am somewhat new to web development and I'm trying to figure out the most preferred way of taking a standalone header from one html document and adding it to other html documents without code duplication. If possible I want to do this with Javascript so I can learn with more basic tools before expanding further.

I've researched this a fair bit, but the advice is a bit confusing since it either seems out of date or possibly not the most secure way of handling things. Is there a preferred way of doing something like this?

you are viewing a single comment's thread
view the rest of the comments
[+] 7 points 3 years ago* (last edited 7 months ago) (1 child)
  • [–] 3 points 3 years ago

    I haven't used web components, but from everything I have read, it's the way to do this without using frameworks or templating or whatever.

    For OP:

    Moz docs:
    https://developer.mozilla.org/en-US/docs/Web/API/Web_components

    This article seems to address exactly what you want?
    https://www.freecodecamp.org/news/reusable-html-components-how-to-reuse-a-header-and-footer-on-a-website/

    Here are some articles I have skimmed and seem useful?
    https://coderpad.io/blog/development/intro-to-web-components-vanilla-js/

  • source
  • parent