header, footer, nav
<header> typically logo, site title, aur navigation contain karta hai — page ke top par, lekin kisi bhi section ke andar bhi ho sakta hai (jaise ek <article> ka apna header). <nav> navigation links ka group hai (main menu, breadcrumbs, pagination). <footer> page/section ke end mein extra info — copyright, contact, related links.
Important: <header>/<footer> POORI PAGE ke liye ek baar hi nahi hote — ek <article> ka bhi apna <header> (jaise post title + author) aur <footer> (jaise tags + share buttons) ho sakta hai.
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<header>
<h2>Blog Post Title</h2>
<p>By Aarav | July 28, 2026</p>
</header>
<p>Article content yahan...</p>
</article>
</main>
<footer>
<p>© 2026 My Website. All rights reserved.</p>
</footer>
</body>- header = top section (logo, title, nav) — page ya article dono ke liye
- nav = links ka group, main navigation ke liye
- footer = end section (copyright, extra links) — page ya article dono ke liye
Ek page mein multiple <nav> ho sakte hain (main menu, footer links, breadcrumbs) — aria-label se unhe distinguish kar sakte ho, taaki screen reader users samajh sakein kaunsa nav kya hai.
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/products">Products</a>
</nav>
<nav aria-label="Breadcrumb">
<a href="/">Home</a> > <a href="/products">Products</a> > Current Page
</nav>Header ko scroll karte waqt bhi top par "sticky" rakhna common design pattern hai — semantic <header> tag ke saath CSS position: sticky combine karke implement hota hai.
<header style="position: sticky; top: 0; background: white;">
<h1>My Site</h1>
<nav>...</nav>
</header>
<main>
<!-- lots of content, header sticky rehta hai scroll karte waqt -->
</main>