Member Avatar for varoluscu_prens

Hi There;
I try to design a web site. There are many pages in my web site and I linked them altogether. But there are constant buttons must be existed in different pages. I mean there are buttons namely, "Home" , "About" .. vs in different HTML pages . I do not write to codes of constant buttons in every HTML pages. How can I handle this?

Thanks in advance.

  • 2 Contributors
  • 3 Replies
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ckchaudhary

Dani AI

Generated

As pointed out, the maintainable pattern is to keep the common UI (header, nav, footer) in a single source of truth and include it into pages. Practical options and trade-offs are summarized below so the project works cleanly whether the site is served dynamically or statically.

Server-side include (recommended when the host supports it): keep header.php with the nav markup and include it from each page. Example pattern:

/partials/header.php
<nav>
  <a href="/index.php" <?php if(isset($active)&&$active=='home') echo 'class="active"'; ?>>Home</a>
  <a href="/about.php" <?php if(isset($active)&&$active=='about') echo 'class="active"'; ?>>About</a>
</nav>
about.php
<?php $active = 'about'; include 'partials/header.php'; ?>
<!-- page content -->

Client-side include (works on static hosting): fetch a partial HTML and inject it. This keeps the file DRY without server-side rendering:

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

<script>
fetch('/partials/header.html')
  .then(r => r.text())
  .then(html => { document.getElementById('site-header').innerHTML = html; });
</script>

Notes, pitfalls and alternatives:

  • Relative paths often break when the partial is included from pages in different directories. Use root‑relative paths (/css/site.css) or set a consistent base.
  • For SEO and accessibility, server-side includes are more robust because markup is present on first load. Client-side injection depends on JS execution.
  • If the site is static but needs templating, consider a static site generator (Jekyll, Hugo) or a build step that produces pages.
  • If renaming .html to .php is not desirable, servers can be configured to parse .html as PHP (hosting permitting).
    Further reading: PHP include details are in the official manual (include); client-side insertion can use the Fetch API (Fetch API).

Recommended Answers

All 3 Replies

Member Avatar for ckchaudhary

you gonna have to use some server side technology to do that. for instance in php you define a header.php file, footer.php file and put common elements there. Then on content pages like aboutus.php you simply include header.php and footer.php in proper places.. have a look on w3schools for php include, its not difficult

Member Avatar for varoluscu_prens

you gonna have to use some server side technology to do that. for instance in php you define a header.php file, footer.php file and put common elements there. Then on content pages like aboutus.php you simply include header.php and footer.php in proper places.. have a look on w3schools for php include, its not difficult

I couldn't see it in w3schools , can you please give link?

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.