0
0
HTMLmarkup~5 mins

Header, footer, main in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

These tags help organize a webpage into clear parts: the top (header), the main content (main), and the bottom (footer). This makes pages easier to read and use.

When you want to add a title or navigation at the top of your webpage.
When you need to separate the main content from other parts of the page.
When you want to add copyright or contact info at the bottom of the page.
When you want your webpage to be easier for screen readers to understand.
When you want to improve your website's structure for search engines.
Syntax
HTML
<header>
  <!-- Top section content like logo or menu -->
</header>

<main>
  <!-- Main content of the page -->
</main>

<footer>
  <!-- Bottom section content like copyright -->
</footer>
header is for introductory content or navigation.
main holds the main content unique to the page.
footer is for information at the bottom like contact or legal info.
Examples
A header with a title and simple navigation links.
HTML
<header>
  <h1>My Website</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>
Main section containing an article with a heading and paragraph.
HTML
<main>
  <article>
    <h2>Welcome!</h2>
    <p>This is the main content area.</p>
  </article>
</main>
Footer with copyright text.
HTML
<footer>
  <p>Ā© 2024 My Website. All rights reserved.</p>
</footer>
Sample Program

This webpage uses header, main, and footer to separate the page into top, middle, and bottom sections. The header and footer have a blue background with white text. The main area has a light background and holds the main message.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header, footer {
      background-color: #004080;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    main {
      flex-grow: 1;
      padding: 1rem;
      background-color: #f0f8ff;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is the main content area where you find the most important information.</p>
  </main>
  <footer>
    <p>Contact us at info@example.com</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Using these tags helps screen readers understand your page better.

They also improve SEO by clearly showing page structure.

Remember to keep only one main per page for clarity.

Summary

header is for the top part like titles and menus.

main holds the main content unique to the page.

footer is for the bottom part like contact info or copyright.