Search code examples
htmltemplatesdynamicreusabilityconsistency

Dynamic HTML Construction

Every time I decide to change something in my header/navigationbar/footer/etc. I need to apply those changes to 16 other html files so my changes are consistent across my entire website.

My question is: is there a way i can make my website's template be automatically applied to every page?

An example of any page on my website and what i have in mind would look like this: 

<html>
    <head>injected code</head>
    <body>
        <header>injected code<header>
        <section>NOT INJECTED CODE</section>
        <footer>injected code</footer>
    </body>
</html>

I know repeating code like this is bad practice, so how do i reuse (localize) code for these areas of my html since they will always be the same?

I am not really interested in content management systems.

Solution

  • What i do with the elements that are the same on every page, like the header, nav, footer is create those elements in a file apart and then include via php. Then if you have to change one thing in the header you only have to do it one time.

    Your example will be like:

    <body>
   <header><?php include_once('header.html'); ?><header>
   <section>NOT INJECTED CODE</section>
   <footer><?php include_once('footer.html'); ?></footer>
</body>

    Hope it helps.