DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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:
template.innerHTML

template.innerHTML=`
      // Paste your HTML code 
`
Enter fullscreen mode Exit fullscreen mode

Step 7:
Append element to html page

document.body.appendChild(template.content)
Enter fullscreen mode Exit fullscreen mode

Step 8:
Whole code:

const template = document.createElement('template');
template.innerHTML = `
      // Paste your HTML code 
`
document.body.appendChild(template.content);
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.

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.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!