Knowledge Base
KamlatechToolBlogContact Us
  • Kamlatech Documentation
  • Magento
    • Installation
    • Email Configuration
  • Blogger
    • Adding Code Block
  • Linux
    • Managing Logs
    • Prevent Package Update
  • Node
    • Installation
    • Http-Server
  • Github
    • .gitignore
    • Branch to New Repo
  • HTML
    • Common Header & Footer in HTML
  • Linkedin Infographics
    • Flame Retardant Standards
    • Flame Retardant Terms
  • Music
    • Pandit Niladri Kumar - Sitar
  • Applications
    • Konvect Connect
    • Konvect Fetcher
    • Konvect Fetcher WebApp
  • HTTPS SSL Certificate
    • Lets's Encrypt
  • Oracle Cloud Instance
    • Firewall
    • CPU Stressing
    • CPU Stressing Docker
  • SFTP
    • WinSCP SFTP
  • NextCloud
    • Installation
    • Post Install Tweak
    • PHP Version
  • Wordpress
    • NGINX Configuration
    • Image upload / Crop issue
    • Required PHP Modules
    • PHP Configuration
  • Healthcare Wearables (Cardiac)
    • Wearable ECG
    • Arrhythmia
    • Ambulatory ECG Usecase
    • Understanding EKG Leads
  • Flutter
    • Direct URL Access
    • Change Android PackageName
  • Math
    • Online Equation Writing
  • Backend Web Service
    • Flask App Deployment
  • 3D Modeling
    • DWG in Solid Edge
  • MariaDB
    • MariaDB Commands
  • Excel
    • HTML as String in Excel
  • Tools
    • Online Tools
  • PostgreSQL
    • PostgreSQL Installation
  • MEDUSA
    • Medusa Installation
    • Backend Server/Worker Mode
    • Frontend Deployment
  • Jupyter Lab
    • Jupyter Web App
  • WooCommerce
    • Product Filename Renaming
  • Embedded
    • Flash Xiao Sense Bootloader
Powered by GitBook
On this page
Edit on GitHub
  1. HTML

Common Header & Footer in HTML

Header and footer are an important part of the website which helps in navigation. When using an HTML based website, each separate page of the website have its own header and footer content. Problem arises when we want to change some element of header and footer as we will have to manually make the chances in all pages.

So the best approach would be a centralized header and footer code which can be inserted in all pages of your website. So any change made dot the centralized header and footer code would reflect on all pages.

Unfortunately, HTML does not directly support such inserts. So here is a simple trick to achieve this.

Step 1: Create a header or footer file; here we are creating a footer file named footer.html and place your footer html content inside.

<!-- footer.html -->
<footer id="footer">
    <!-- Your entire footer content goes here -->
</footer>

A client-side approach, using JavaScript, can be used as shown below

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your page content here -->

    <!-- Placeholder for the footer -->
    <div id="footer-placeholder"></div>

    <!-- Include the footer using JavaScript -->
    <script>
    fetch("footer.html")
        .then(response => response.text())
        .then(content => {
            document.getElementById("footer-placeholder").innerHTML = content;
        });
    </script>
</body>
</html>

Note: Some elements like navbar animation (mobile layout) may not work

PreviousBranch to New RepoNextFlame Retardant Standards

Last updated 1 year ago