DEV Community

Cover image for How to create header/footer (using HTML) in each page
Our Coding Hours
Our Coding Hours

Posted on


How to create header/footer (using HTML) in each page

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’)
Enter fullscreen mode Exit fullscreen mode

Step 6:

      // Paste your HTML code 
Enter fullscreen mode Exit fullscreen mode

Step 7:
Append element to html page

Enter fullscreen mode Exit fullscreen mode

Step 8:
Whole code:

const template = document.createElement('template');
template.innerHTML = `
      // Paste your HTML code 
Enter fullscreen mode Exit fullscreen mode

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.


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.

Oldest comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.