Hi friends,
I have 20 html pages. For all the pages footer and header is common. I dont want to use div's and paste header and footer in all 20 pages. It is because if there is a change in header i have to change in all 20 pages. I want to keep header as a single html and want to include in all 20 html pages. For this we can use frames but in html 5 frames are absolute. So what is the way of doing this? Please help me out. Thanks in advance.

I would use php for this job as iframes are out dated.

what you will need to do is add the header and footer code to each page once you have done that if you edit header or footer php will auto update all 20 pages

just place this code at the top of each page

<?php include("header.html"); ?>

and place this code at bottom of every page

<?php include("footer.html"); ?>

that should do the job nicely for you :)

It is a static site so i dont think we can use php.

all hosting offer php as standard try it you never know

If you don't have access to server side scripting (PHP, asp.net, etc..) then do you know if you can use javascript? If so you can load jQuery and easily add HTML elements from a single source.

for html5, you can probably use object like this..

<object name="header" type="text/html" data="head.html"></object>
<br />

<object name="footer" type="text/html" data="footer.html"></object>


I am not sure though, but you can refer to the documentation here.

I am not really sure if we can use two objects ..

Update: yes we can use two. I updated the codes above.

Veedeoo has given a nice workaround that basically does the same thing as javascript includes. Good for when you can use javascript.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.