Member Avatar for yaragalla_mural

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.

  • 5 Contributors
  • 7 Replies
  • 186 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by webhawk

Dani AI

Generated

Quick recap: the goal is one shared header/footer across 20 static pages so you can change it in one place. pointed out server-side templates, suggested client-side JS, and offered the HTML object element. If you truly cannot run server-side code, avoid repeating the same HTML everywhere and pick one of these three durable patterns instead.

First choice (best long‑term): a build-time approach using a static site generator or simple templating step. Create header/footer partial files and generate the 20 final HTML pages from a single layout. That keeps everything in source control, lets you preview locally, and produces plain static HTML for hosting. Example (conceptual):

/_includes/header.html
/layouts/default.html
  {% include header.html %}
  {{ content }}
  {% include footer.html %}

Second choice (minimal server change): Server‑Side Includes (SSI) if your host supports them. Rename pages to be parsed (often .shtml) and use an include directive. In many hosts you enable SSI with a small .htaccess addition; check your host docs. Troubleshooting: confirm the server parses SSI, check file permissions, and ensure the include path is correct.

Third choice (client-side include): use fetch() to load an external fragment and inject it. This works on static hosting without build steps but comes with caveats — SEO, accessibility, flicker/FOUC, CSP, and relative-path problems inside included fragments. Example:

<div id="site-header"></div>

<script>
fetch('/includes/header.html')
  .then(r => r.text())
  .then(html => document.getElementById('site-header').innerHTML = html)
  .catch(e => console.error('include failed', e));
</script>

Practical tips: use absolute URLs inside fragments or fix relative paths after insertion; provide a minimal noscript or server-side fallback for critical content (title, meta, navigation); avoid duplicate IDs in includes. For a static site, a build-time SSG or small build script (npm/Gulp, or a templating tool) usually gives the best maintainability and performance.

Recommended Answers

All 7 Replies

Member Avatar for Simon180

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 :)

Member Avatar for yaragalla_mural

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

Member Avatar for Simon180

all hosting offer php as standard try it you never know

Edited by Simon180
Member Avatar for JorgeM

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.

Member Avatar for veedeoo

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

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

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



</body>

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.

Edited by veedeoo because: more info added
Member Avatar for yaragalla_mural

thank you so much

Member Avatar for webhawk

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.