Semantic HTML — Kyun Zaroori Hai
Semantic elements (<header>, <nav>, <article>, <footer>) content ka MATLAB batate hain — <div> ke ulat, jo koi meaning nahi carry karta, sirf ek generic container hai. <div class="header">...</div> vs <header>...</header> — visually SAME dikh sakte hain (CSS se), lekin semantically bahut alag hain.
Fayde: (1) SEO — search engines page ka structure behtar samajh paate hain. (2) Accessibility — screen readers semantic tags ko use karke navigation shortcuts dete hain ("jump to navigation", "jump to main content"). (3) Readability — code padhne walon ko turant structure samajh aata hai, div soup mein khoye bina.
<!-- Non-semantic (div soup) — kaam karta hai, lekin meaning zero: -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main-content">...</div>
<!-- Semantic — same visual result, MEANING ke saath: -->
<header>...</header>
<nav>...</nav>
<main>...</main>- Semantic tags = content ka matlab batate hain, div = generic/meaningless
- SEO, accessibility, readability — teeno ke liye better
- Visually same dikh sakta hai, semantically bahut alag hai
HTML5 se pehle, saara layout div se banta tha with class names jaise "header"/"footer" — HTML5 ne actual dedicated tags diye. Full list: header, nav, main, article, section, aside, footer, figure, figcaption, time, mark, details, summary.
<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>2026 Sales Data</figcaption>
</figure>
<time datetime="2026-07-28">July 28, 2026</time><details>/<summary> ek native, JavaScript-free collapsible/expandable UI deta hai — "click to expand" pattern bina koi JS likhe, browser khud handle karta hai.
<details>
<summary>Click karo aur dekho...</summary>
<p>Ye content chhupa hua tha, ab visible hai!</p>
</details>