W3.CSS Code Reuse
Why Reuse Code?
Many web pages use the same navigation bar, header, footer, or sidebar.
Instead of copying the same code into every page, you can store common parts in separate files and reuse them.
Resuse Example
Imagine a website with 20 pages, all using the same navigation bar.
If you copy the navigation code into every page, you have to update all 20 pages when the navigation changes.
With code reuse, you can keep the navigation in one file and use it on every page.
Typical parts that can be reused include:
- Navigation bars
- Headers
- Footers
- Sidebars
- Common content
A Multi-Page Website
A website can contain separate pages:
Example
index.html
about.html
products.html
contact.html
Each page can have its own content while sharing the same navigation and footer.
You can reuse common code with JavaScript or with a server-side language such as PHP.
Reusable Navigation
First, create the navigation in a separate file.
JavaScript Version
Store the navigation in a file named nav.html:
nav.html
<nav class="w3-bar w3-black">
<a href="index.html" class="w3-bar-item w3-button">Home</a>
<a href="about.html" class="w3-bar-item w3-button">About</a>
<a href="products.html" class="w3-bar-item w3-button">Products</a>
<a href="contact.html" class="w3-bar-item w3-button">Contact</a>
</nav>
Create a container where the navigation should appear:
Example
<div id="nav"></div>
Then use fetch() to load the navigation:
Example
fetch("nav.html")
.then(response => response.text())
.then(html => {
document.getElementById("nav").innerHTML = html;
});
PHP Version
Store the navigation in a file named nav.php:
nav.php
<nav class="w3-bar w3-black">
<a href="index.php" class="w3-bar-item w3-button">Home</a>
<a href="about.php" class="w3-bar-item w3-button">About</a>
<a href="products.php" class="w3-bar-item w3-button">Products</a>
<a href="contact.php" class="w3-bar-item w3-button">Contact</a>
</nav>
Then include the navigation where you want it to appear:
Example
<?php include "nav.php"; ?>
Reusable Footer
The same idea can be used for a footer.
JavaScript Version
Create a file named footer.html:
footer.html
<footer class="w3-container w3-dark-grey">
<p>Copyright 2026 My Website</p>
</footer>
Create a container for the footer:
Example
<div id="footer"></div>
Then load it with fetch():
Example
fetch("footer.html")
.then(response => response.text())
.then(html => {
document.getElementById("footer").innerHTML = html;
});
PHP Version
Create a file named footer.php:
footer.php
<footer class="w3-container w3-dark-grey">
<p>Copyright 2026 My Website</p>
</footer>
Then include it on every page:
Example
<?php include "footer.php"; ?>
Reusable Page Content
You can reuse more than navigation and footers.
A sidebar, banner, contact box, or any other common content can be stored in a separate file.
JavaScript Version
Create a reusable sidebar in sidebar.html:
sidebar.html
<aside class="w3-bar-block w3-light-grey">
<a href="#" class="w3-bar-item w3-button">News</a>
<a href="#" class="w3-bar-item w3-button">Events</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
</aside>
Load the sidebar into a container:
Example
<div id="sidebar"></div>
<script>
fetch("sidebar.html")
.then(response => response.text())
.then(html => {
document.getElementById("sidebar").innerHTML = html;
});
</script>
PHP Version
Create the reusable sidebar in sidebar.php, then include it:
Example
<?php include "sidebar.php"; ?>
Complete JavaScript Page
This page loads both the navigation and footer from separate files:
index.html
<!DOCTYPE html>
<html>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>
<div id="nav"></div>
<main class="w3-container">
<h1>Home</h1>
<p>Welcome to my website.</p>
</main>
<div id="footer"></div>
<script>
fetch("nav.html")
.then(response => response.text())
.then(html => {
document.getElementById("nav").innerHTML = html;
});
fetch("footer.html")
.then(response => response.text())
.then(html => {
document.getElementById("footer").innerHTML = html;
});
</script>
</body>
</html>
The files about.html, products.html, and contact.html can use the same reusable navigation and footer.
Complete PHP Page
With PHP, the common files are included before the page is sent to the browser:
index.php
<!DOCTYPE html>
<html>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>
<?php include "nav.php"; ?>
<main class="w3-container">
<h1>Home</h1>
<p>Welcome to my website.</p>
</main>
<?php include "footer.php"; ?>
</body>
</html>
The file about.php can use the same navigation and footer:
about.php
<?php include "nav.php"; ?>
<main class="w3-container">
<h1>About</h1>
<p>This is the About page.</p>
</main>
<?php include "footer.php"; ?>
Now you can change nav.php once, and the change will appear on every page that includes it.
JavaScript or PHP?
Both methods can reuse common page content, but they work differently:
| Method | How It Works |
|---|---|
| JavaScript | Loads reusable HTML in the browser with fetch() |
| PHP | Includes reusable files on the server before the completed page is sent to the browser |
Use JavaScript when you want the browser to load reusable content.
Use PHP when your website runs on a PHP server and you want reusable content to be combined on the server.
Note: JavaScript fetch() normally requires the files to be served from a web server. It may not work when you open the files directly from your computer with file://.
Do Not Use iframe for Page Layout
The <iframe> element embeds another web page inside the current page.
It is useful for embedded content such as maps, videos, and external documents.
For reusable navigation bars, headers, footers, and page content, JavaScript or server-side includes are usually better choices.
