All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Header And Footer In HTML Example

Last Updated : Jul 1, 2023

Header And Footer In HTML Example

In this tutorial we will show you the solution of header and footer in HTML example and we are going to show you how you are able to create headers and footer in HTML and for understanding, header is just a part and section of html in which we give navigation links and it is introductory part of a website that what is in this page.

Whereas footer is the bottom part of webpage in which we give links to top, write about copyrights, etc. Let us understand header and footer with example.

Step By Step Guide On Header And Footer In HTML Example :-

As, header and footers are main part of our webpage, so today we are going to learn about both.

We can also use CSS in header and footers and mainly most of tags that work in body done the same task in header and footer tag. Now, let us understand both of them with help of codes.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
   </head>
 <body>
<header>
  <h1>you can type the main heading here</h1>
  <p>write the important text of webpage here</p>
<!-- you can also create a menu bar or say navigation bar here -->
</header>
<p>
 Rest the content of body, you can write here.
</p>
<footer>
  <p> type the name of author here<br>
You can write copyright query here and other text like designed by etc. </p>
</footer>
 </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page.
  4. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. Here, in body we create a header tag and footer tag. You can also create more tags as you want between them and inside them also.
  7. In header part we create one heading tag and one paragraph tag. In heading tag, we have to specify the main topic of say headline of page, where in paragraph tag, we can create a link to home page, insert a logo and many other thing. We can also create a menu bar here.
  8. Now, let us talk about footer, in footer we create a paragraph tag, you can create a div there and many more things.
  9. Here, we can create a navigation button to top of page and can create copyright text and text like designed by/ for etc. hence, there are many things which you can write here.
  10. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article we are able to create headers and footers in html. I hope this tutorial on header and footer in HTML example helps you.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪