Why Header, footer, main in HTML? - Purpose & Use Cases

The Big Idea

Discover how simple tags can make your website clear and friendly for everyone!

The Scenario

Imagine you are building a website by typing all the content in one big block without any structure. You write the title, then the menu, then the main content, and finally the copyright note all mixed together.

The Problem

Without clear sections, it becomes hard to find and update parts like the menu or footer. The page looks messy in code, and screen readers or search engines struggle to understand the page layout.

The Solution

Using <header>, <footer>, and <main> tags gives your page clear parts. This helps browsers, tools, and people know which part is the top, the main content, and the bottom.

Before vs After

✗ Before

<div>Title and menu here</div>
<div>Main content here</div>
<div>Footer info here</div>

✓ After

<header>Title and menu here</header>
<main>Main content here</main>
<footer>Footer info here</footer>

What It Enables

It makes your website easier to read, update, and accessible for everyone, including people using screen readers.

Real Life Example

Think of a newspaper: the header is like the newspaper's name and date, the main is the articles, and the footer is the contact info and copyright. Using these tags is like organizing your page like a real newspaper.

Key Takeaways

Clear page sections improve code readability and maintenance.

Semantic tags help accessibility and SEO.

They create a natural structure like real-world documents.