Without using frames, is it possible to load a html page within a certain area of another html page?

To hopefully make my question a little clearer, I am trying to write a website where I could have the site's logo an navigation system be saved on a certain file, and have all of the other pages on the site load that file so if I want to make a change, I won't need to rewrite the code on every page on the website. I know this is possible with frames, but I'm not really a fan of them and was wondering if there is any other way to do this.

Thank you!

Dani AI

Generated

Short answer: yes — you can avoid frames and still keep one shared header/navigation across many pages. There are two practical patterns to choose from depending on hosting and goals: assemble pages on the server (best for traditional multi‑page sites and SEO) or load partials on the client (useful for progressive enhancements or single‑page behaviors). was correct that server-side assembly is the cleanest for most sites; it keeps URLs simple, works without JavaScript, and avoids crawl/index problems.

A minimal server-side example (common on PHP-capable hosts):

<?php
// in page.php
include 'header.php';
?>
<!-- page-specific markup here -->
<?php
include 'footer.php';
?>

Client-side partial loading is also viable today. Fetch a small HTML fragment and inject it into a container, then re-initialize any scripts or UI behavior for the newly inserted DOM:

<div id="nav-target"></div>

<script>
fetch('/partials/nav.html')
  .then(r => r.text())
  .then(html => {
    document.getElementById('nav-target').innerHTML = html;
    // reattach handlers or run init functions here
  });
</script>

Practical notes and gotchas:

  • Use root‑relative or absolute asset paths inside included fragments to avoid broken CSS/JS links.
  • Injecting HTML removes bound event listeners; prefer event delegation or re-run initialization after insertion.
  • For SEO and accessibility prefer server-side rendering or provide a server fallback; use <noscript> for critical nav if you rely on client loading.
  • For larger sites consider build-time templates (static site generators) or framework/layout features (templating engines, CMS themes) so you edit one source and publish many pages.
  • Avoid duplicate script/style imports when assembling parts and watch for duplicated IDs.

Tiebacks: ’s aim is perfectly normal; ’s frame approach will work but has legacy issues; ’s push toward server includes is sensible for robustness. Choose server assembly for stability and SEO, client loading when you need dynamic updates and accept the extra care that requires.

Recommended Answers

All 4 Replies

you can yes

e.g if you have a static page holding links in the left frame and you want the right pane to go to whatever link they click in the left pane then you can target one frame from another with something like:

<A href="page.html" target="contentframe">Link Description</A>

this only works if you give your frames proper names

commented: Original Question specifically says "Without using Frames". -1

- you could use iframes (inline frames) but i wouldn't suggest it, this situation pertains better to frames if its a choice between the two;

- you can get a certain amount of 'global control' using sitewide stylesheets, but often not enough;

- beyond that, using some PHP, Perl, ASP, JSP, XSLT, etc at the server to glue parts of pages together works, with a fair degree of control;

- avoid using client-side Javascript or XSLT to do this, it doesn't make good sense;

- alternatively, if you don't have a need or desire for pages to be created everytime they are accessed, use any kind of programming / transformation language or other technology to prepare your pages from mutliple sources offline.

commented: Good answer. +7

That is not possible, you must use server side script includes Juggler.

commented: Inaccurate, unclear. -1

php?

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.