How to add header and footer in every page

JavaScript Conversations
#1

how to add header and footer in every page of a web app without repeating the code

#2

A website, platform, blog, or web page’s header and footer are essential components. They usually include links to crucial web pages that target what users will want to see before placing an order or submitting an inquiry.

You see, JavaScript is a pretty magical language that can give you almost any and every result that you desire. With the perfect combination of HTML and CSS, JavaScript can be your magic wand in the world of web development.

So in this Blog, we shall be talking about how a single header and footer code can be used in multiple pages, how to add header and footer in Html and how to make a JavaScript header.

Step 1:
Open your existing project

Step 2:
Create a new file called header.js

Step 3:
Copy your header section
<header> --- </header>

Step 4:
Open header.js file

Step 5:
Create template

const template = document.createElement(‘template’)

Step 6:
template.innerHTML

template.innerHTML=`
      // Paste your HTML code 
`

Step 7:
Append element to html page

document.body.appendChild(template.content)

Step 8:
Whole code:

const template = document.createElement('template');
template.innerHTML = `
      // Paste your HTML code 
`
document.body.appendChild(template.content);

Step 9:
Link header.js file in Html page
Write in place of

<script src=’header.js’>

Importance of header and footer :

The HTML tag is used to define a program’s or section’s header, as it carries information about the title and heading of the associated material. The section heading (an h1-h6 element or a hgroup> element) is commonly placed in the element, but it is not essential.

It can also be used to surround a table of contents, a query form, or other significant logos within a section. The tag is a new tag in HTML5 that acts as a container tag, containing a start tag, content, and an end tag. In a single document, there can be many elements. This tag can’t be used inside of a , , or another element.

Conclusion:

HTML is the building block of the internet, and it is used to form web pages and web applications. JavaScript builds the structure above it. With the above steps we learnt how to add header and footer in Html and how to make a javascript header. From the ground up, we have added a link to a tutorial that explains how to create header in each page and how to create footer using HTML. This HTML and JavaScript Tutorial and HTML / JavaScript Example will introduce you to everything related to HTML.

2 Likes
#3

If you want to create this in react it is way to simple.

  • You just have to create a component and export it for eg:- header component
  • Later you just have to import the header component using the import statement and use it any page it can also works as a common component
  • Same you can do for footer component.
1 Like
#4

thank you for your valuable respond