header Element in HTML
Semantic Tag with Examples
HTML <header> Element: Introductions With Meaning
Every story has a beginning — and in HTML, that beginning often lives in a <header>. This semantic element represents the introductory content of a page or a section. It's not just about visual design — it's about giving structure and meaning to where things begin.
Purpose of <header>
The <header> element is used to group introductory content — like titles, logos, navigation, and brief summaries. It can be used once at the top of the page or within individual sections or articles.
Think of it as the handshake of your content.
Basic Syntax
<header>
<h1>Fruit Blog</h1>
<nav>
<a href="#apple">Apple</a>
<a href="#banana">Banana</a>
</nav>
</header>
Fruit Blog
[ Apple | Banana ]
This header introduces the page and includes navigation for fruit-related topics.
Where Can You Use <header>?
- At the top of the entire document — introducing the whole page
- Inside
<article>or<section>— as a local heading
Example: Section with Header
<section>
<header>
<h2>Cherry Facts</h2>
<p>Everything you need to know about cherries.</p>
</header>
<p>Cherries are small, round, and rich in antioxidants...</p>
</section>
This use clearly introduces the section without affecting the main page header.
Difference Between <header> and <head>
These two are often confused. Here’s a quick distinction:
| Element | Purpose | |---------------|---------------------------------------| |<head> | Contains metadata, links, scripts |
| <header> | Contains visible page/section intro |
Accessibility and Semantics
<header> helps screen readers and assistive technologies understand the structure of your content. It improves navigability for users with disabilities by grouping related introductory content.
Best Practices:
- Use only one
<header>per section - Include
<h1>to<h6>inside headers to clarify hierarchy - Avoid placing
<header>inside a<footer>or<address>
Real-World Example: Full Page with <header>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fruit World</title>
</head>
<body>
<header>
<h1>Welcome to Fruit World</h1>
<nav>
<a href="#apple">Apple</a> |
<a href="#banana">Banana</a> |
<a href="#cherry">Cherry</a>
</nav>
</header>
<main>
<section id="apple">
<header>
<h2>Apple Section</h2>
</header>
<p>Apples are crispy and sweet.</p>
</section>
</main>
</body>
</html>
Welcome to Fruit World
[ Apple | Banana | Cherry ]
Apple Section
Apples are crispy and sweet.
Summary
The <header> element creates a meaningful introduction for content. You’ve learned how to:
- Use
<header>for pages, articles, and sections - Include navigation and headline content
- Improve accessibility and content clarity
What’s Next?
Up next: we’ll explore the <footer> element — the closing act that wraps up content meaningfully and semantically.
Comments
Loading comments...