I would like to get advice here on easy and most efficient way to have a generic or global header and footer for an html code.
Below is my html code - I have different CSS files for styling.In the middle section - there are different header tabs and sub-headers within each header tab, this then takes you to a specific page.
I have different files for each page - I'd like to have same header and sub-header on each page such that, if there is a need to correct anything within the header section, I can just adjust in one file without having to go through the pages to update.
I have tried .js and php but to no success, perhaps it's my code.
<!DOCTYPE html><html><head><title>www.companysite.com</title><link rel="stylesheet" href="styles/general.css"><link rel="stylesheet" href="styles/header.css"><link rel="stylesheet" href="styles/content.css"> </head><body><div class="header"><div class="left-section"><img class="company-logo" src="icons/company new logo.png"></div><div class="middle-section"><div class="navbar-header"><a href="#home">Home</a><div class="subnav"><button class="subnavbtn">About<i class="fa fa-caret-down"></i></button><div class="subnav-content"><a href="pages/about-business-goals-values.html">Business Goals & Values</a><a href="etc">etc1</a></div></div><div class="subnav"><button class="subnavbtn">Candidates<i class="fa fa-caret-down"></i></button><div class="subnav-content"><a href="pages/candidate-feedback.html">Feedback</a><a href="pages/candidate-subit-cv.html">Submit CV</a><a href="etc">etc2</a></div></div></div></div></div><div class="right-section"><button>Submit CV</button></div> </div></body>