0

I have a website with a header that I want to be the same on all pages. Every time I change one thing, I have to go and update it on all other pages, which is time-consuming and annoying. Is there any way that I could replace this repetitive code with something simple?

My code:

<header>
    <img src="logo.png"></img>
    <nav>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
</header>

Is there any way that I could replace this code across multiple pages by having something like this

<header>
    <div class="header"></div>
</header>

And have it be replaced with all the code above (by storing it in HTML/CSS). Any way that allows me to change one thing and have it change on every page is what I'm looking for.

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
Equinoxx
  • 1
  • 5
  • 1
    Yes, check out web components. https://developer.mozilla.org/en-US/docs/Web/Web_Components – H.W. Sanden Jul 27 '22 at 06:24
  • This is why PHP was invented. The basic idea is instead of index.html, about.html etc you only have index.php, then you use a link like `index.php?page=about` to dynamically fill in the main contents of the page (this is known as "dynamic website" as opposed to the "static" one you currently have). Install xampp to build a PHP site on your own computer. –  Jul 27 '22 at 06:42

0 Answers0