HTML <header> Tag – Page or Section Header
📌 Introduction
The <header> tag is used to define the top section of a page or a section.
It usually contains:
- Logo
- Website title
- Navigation links
- Introductory content
It is a semantic tag, meaning it clearly describes its purpose.
🧱 Syntax
<header>Content here</header>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Header Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<p>Welcome to my homepage</p>
</header>
</body>
</html>
🖥️ Output Explanation
- The
<header>groups top content - It usually appears at the top of the page
- It improves structure and readability
🎯 What Goes Inside <header>?
Common elements:
<h1> - <h6>headings<nav>navigation menus- Logo images
- Intro text
Example:
<header>
<h1>Ahmed Codes</h1>
<nav>
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Contact</a>
</nav>
</header>
🧠 Important Concept
👉 You can use <header>:
- For the whole page
- Or inside sections/articles
Example:
<article>
<header>
<h2>Article Title</h2>
<p>Author name</p>
</header>
<p>Article content...</p>
</article>
⚖️ <header> vs <div>
| Tag | Type | Purpose |
|---|---|---|
<header> |
Semantic | Defines header area |
<div> |
Generic | No meaning, just container |
✔ Prefer <header> when it is truly a header
🎯 Why <header> is Important
- Improves SEO
- Helps screen readers
- Makes code more readable
- Used in modern web design
🚫 Common Mistakes
- Using
<header>for everything ❌ - Putting footer content inside header ❌
- Ignoring semantic structure ❌
🎨 Styling Example
<header style="background:#333; color:white; padding:10px;">
<h1>My Website</h1>
</header>
🧪 Mini Exercise
Create a page with:
A
<header>containing:- Website title
- Navigation links
A paragraph below it
Style the header with a background color