HTML Header Across Multiple Pages

HTML-CSS
1

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?
Thanks.

2

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:

<?php
	echo "
	<div>
		<p>I'm a header</p>
	</div>
  	";
?>

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
3

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

4

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

Example:

<div id="header">
...
</div>

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.