Member Avatar for atechg

I am beginner in html / website design. I have 4-5 webpages. All these pages have top banner, left sidebar & right sidebar. At present I am writing html code in all the 4-5 pages for these above elements. Is there a way, I just write the code once (in one file) and this file can be called / included in all the 4-5 pages. In case, I have to make change I just need to update one file and the change gets reflected in all the pages.

  • 4 Contributors
  • 5 Replies
  • 385 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Good to see the include approach solved the original problem for . There are three practical ways to avoid repeating banner/sidebars across pages: server-side partials (templates), a build-time workflow or static site generator, and client-side injection. ’s reminder to keep layout in CSS is still valid—styles control presentation, partials keep the shared HTML DRY—and ’s experience shows how partials scale when a site grows.

When the host can run server-side code, keep the shared chunks on the server so crawlers and users get complete HTML. One lightweight option on Apache is Server Side Includes; an example include looks like this:

<!--#include virtual="/includes/header.html" -->

This needs server parsing (often files end with .shtml) and correct include paths/permissions. Troubleshooting tips: confirm the host parses SSI/PHP/your chosen engine, try a tiny test include, and use absolute paths if relative ones fail.

If server-side processing isn’t available, a small client-side injection can load fragments at runtime. Example (runs after DOM is ready):

<div id="top"></div>

<script>
document.addEventListener('DOMContentLoaded', function(){
  fetch('/includes/header.html')
    .then(function(r){ return r.ok ? r.text() : ''; })
    .then(function(html){ document.getElementById('top').innerHTML = html; })
    .catch(function(err){ console.error(err); });
});
</script>

Note: client-side injection depends on JavaScript, so it’s not suitable for critical content that must be indexed or accessible without JS.

For small collections of pages, a build step or static site generator (assemble header + content + footer into final HTML) gives the best mix of performance, SEO, and simplicity. Avoid framesets—their accessibility, SEO, and usability problems make them a poor choice, as noted in the thread. In short: prefer server-side partials when the host supports them; use a build-time approach for static hosts; use client-side injection only for progressive enhancement.

Recommended Answers

All 5 Replies

Member Avatar for macneato

Hi,

Are you talking about like the layout??? Cause if so, use CSS.

Edited by macneato because: n/a
Member Avatar for almostbob

Yes,
its the most common improvement from "my first web page" to "my second web page"
in .php .asp .shtml (server side language extensions to html) you can <?php include('menu.php'); ?> (example)
the only thing you have to do is determine what server language your hosting package supports and use that language
my site has 1600+ pages, & 2 included files that actually do all the 'grunt work'
head.php that is all the doctypes css scritps
menu.php that is the menu, sidebar and footers
the average page looks like

<?php include('/head.php');
include('/menu.php'); ?>
content bla bla bla
</body></html>

menus on all pages can be altered easily and all pages retain the same look and feel all the time

Edited by almostbob because: n/a
Member Avatar for atechg

It works. Thanks.

Yes,
its the most common improvement from "my first web page" to "my second web page"
in .php .asp .shtml (server side language extensions to html) you can <?php include('menu.php'); ?> (example)
the only thing you have to do is determine what server language your hosting package supports and use that language
my site has 1600+ pages, & 2 included files that actually do all the 'grunt work'
head.php that is all the doctypes css scritps
menu.php that is the menu, sidebar and footers
the average page looks like

<?php include('/head.php');
include('/menu.php'); ?>
content bla bla bla
</body></html>

menus on all pages can be altered easily and all pages retain the same look and feel all the time

Member Avatar for rajendra.parmar

I am beginner in html / website design. I have 4-5 webpages. All these pages have top banner, left sidebar & right sidebar. At present I am writing html code in all the 4-5 pages for these above elements. Is there a way, I just write the code once (in one file) and this file can be called / included in all the 4-5 pages. In case, I have to make change I just need to update one file and the change gets reflected in all the pages.

dear friend,

I got your prob., to resolve this prob. you have to use <frameset> to create this web site,

Regards,

Member Avatar for almostbob

dear friend,

I got your prob., to resolve this prob. you have to use <frameset> to create this web site,

Regards,

framesets require multiple files all complete html, they are larger than necessary so are slower than necceessary
framesets are not indexed well by search engines
and have been superseded by server includes, in any of the server languages previously mentioned, smaller faster and more indexable
framesets are a retrograde step,

the thread was marked 'solved' before you posted, the original poster thinks its DONE, and the answers given work

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.