---
title: "Explain about HTML Header, Body, and Footer tags"  
description: "Three essential tags that assist in organizing and formatting the content material of a website are the header, body, and footer tags."  
author: "Ravi Vishwakarma"  
published: 2024-06-07  
updated: 2024-06-07  
canonical: https://www.mindstick.com/articles/336036/explain-about-html-header-body-and-footer-tags  
category: "html"  
tags: ["html", "html5"]  
reading_time: 3 minutes  

---

# Explain about HTML Header, Body, and Footer tags

In [HTML](https://www.mindstick.com/category/blog/html) ([HyperText Markup](https://answers.mindstick.com/qa/33917/what-is-hypertext-markup-language) Language), a website's structure is described by using [many tags](https://www.mindstick.com/blog/304308/html-formatting-tags-with-example). Three [essential](https://www.mindstick.com/articles/157259/why-web-design-is-essential) tags that assist in [organizing](https://www.mindstick.com/articles/310791/all-you-need-to-know-about-organizing-before-moving) and formatting the [content material](https://www.mindstick.com/forum/145493/re-optimize-your-vintage-content-material-and-pressure-more-site-visitors) of a website are the <header>, <body>, and <footer> tags.

Here’s an overview of each:

#### 1. <header> Tag

The <header> tag defines the [introduction](https://www.mindstick.com/blog/359/iphone-development-introduction) to material or a fixed of navigational hyperlinks for a website or a section of the web page. Typically, the header consists of elements like:

1. Logo or website call
2. [Navigation menu](https://www.mindstick.com/forum/158677/how-can-create-a-responsive-navigation-menu-that-adapts-to-different-screen-sizes)
3. Headline or page title
4. Introduction or tagline

The <header> detail can be used within the <body> of a file and can also be used inside other sectioning elements like <article>, <section>, or <aside>.

## Example:

```html
<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
```

**2. <body> Tag**\
The <body> tag encloses the principal content material of an HTML record that is visible to customers. This is where all of the content along with text, snapshots, videos, links, and different elements are placed. The <body> tag is an instantaneous child of the <html> element.

## Example:

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>
<body>
  <header>
    <h1>Welcome to My Webpage</h1>
  </header>
  <main>
    <p>This is the main content of the page.</p>
    <img src="image.jpg" alt="Sample Image">
  </main>
  <footer>
    <p>© 2024 My Webpage. All rights reserved.</p>
  </footer>
</body>
</html>
```

**3. <footer> Tag**\
The <footer> tag is used to define the footer for a report or a phase. A footer commonly incorporates information approximately the writer, copyright records, links to terms of provider, privacy coverage, and contact with statistics.

The <footer> element can be used within the <body> of a record and also can be used inside different sectioning elements like <article>, <section>, or <aside>.

## Example:

```html
<footer>
  <p>© 2024 My Website. All rights reserved.</p>
  <p>Contact: <a href="mailto:info@mywebsite.com">info@mywebsite.com</a></p>
</footer>
```

#### Putting It All Together

Here’s an instance of an HTML document utilizing **<header>, <body>, and <footer>** tags:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- The <head> section contains metadata about the document -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Webpage</title>
</head>
<body>
  <!-- The <header> section contains the introductory content and navigation -->
  <header>
    <h1>Sample Webpage Header</h1>
    <nav>
      <ul>
        <!-- Navigation links -->
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- The <main> section contains the main content of the webpage -->
  <main>
    <!-- The <section> tag defines sections in the document -->
    <section id="home">
      <h2>Home</h2>
      <p>Welcome to the home section.</p>
    </section>

    <section id="services">
      <h2>Services</h2>
      <p>Details about services offered.</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Contact information goes here.</p>
    </section>
  </main>

  <!-- The <footer> section contains the footer content -->
  <footer>
    <p>© 2024 Sample Webpage. All rights reserved.</p>
  </footer>
</body>
</html>
```

## Output :

![Explain about HTML Header, Body, and Footer tags](https://www.mindstick.com/mindstickarticle/d681e58a-c26c-47bf-ab42-c1c6e9b72227/images/94276a37-a480-49ba-ab1a-444265905210.png)

**[Explanation](https://answers.mindstick.com/blog/94/neural-network-simple-explanation-with-real-life-examples)**

`<head>` **Section**: Show the metadata about the webpage such as [character](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) set, viewport settings, and the document's title.

`<header>` **Section**: Contains the introduction to navigation links for the webpage.

`<main>` **Section**: The main content of the webpage is placed here, divided into sections (`<section>` tags) for better organization.

`<footer>` **Section**: It Contains the footer content like more links, legal page links, and copyright information.

---

Original Source: https://www.mindstick.com/articles/336036/explain-about-html-header-body-and-footer-tags

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
