HTML Header Across Multiple Pages

Hello. I’m creating an HTML website and I’d like to have a header file or something that I can edit and that all other pages are coded to parse from, so if I ever change the banner, I don’t have to update many many pages. I know this is done with PHP and/or Javascript, I’m just not sure how.
Could somebody please help me out here?

I’ve done this before with PHP. You basically use the echo and the includes tags.

Save your header in a php file using the echo tag. Something like this:

	echo "
		<p>I'm a header</p>

Then, in your index.html or wherever you want to use the header, wherever in the page you want to use it (i.e. you could do the same thing with a footer.php and write this at the bottom of the file), you write this:

 <?php include "header.php"; ?>
1 Like

You don’t need to make the included file as php file. A simple text file or html file will do the bid

I think you can use jQuery .load() method to do this work. This is how you do it.

  1. Create a new HTML file to place your header code


<div id="header">

Now in your other page you can use jQuery Load method and fetch it like this:

$("#htmlData").load("headerfile.html #Header");

Here “#htmlData” is the div element on the second page where this header file code is rendered.