article, section, aside, main
<main> page ka PRIMARY content hai — har page par sirf EK baar use hota hai (header/footer/nav ke andar nahi). <article> self-contained content hai — agar isse kisi doosri site par copy-paste karo aur akele bhi sense bane (jaise blog post, news article, product card).
<section> content ko thematic groups mein divide karta hai — apne aap mein "standalone" nahi hai (article ke ulat), lekin logically ek unit hai (jaise "About Us" section, "Reviews" section). <aside> tangentially related content hai — sidebar, related links, ads.
<main>
<article>
<h2>How to Learn HTML</h2>
<section>
<h3>Getting Started</h3>
<p>Content...</p>
</section>
<section>
<h3>Advanced Topics</h3>
<p>Content...</p>
</section>
</article>
<aside>
<h3>Related Articles</h3>
<ul><li><a href="#">CSS Basics</a></li></ul>
</aside>
</main>- main = page ka primary content, sirf ek baar per page
- article = standalone, self-contained (blog post, news)
- section = thematic grouping (standalone nahi); aside = tangentially related
<article> ke andar doosre <article> nest ho sakte hain — jaise ek blog post (outer article) ke andar uske comments (har comment apna article, kyunki standalone bhi sense banata hai).
<article>
<h2>Blog Post Title</h2>
<p>Main content...</p>
<section>
<h3>Comments</h3>
<article>
<p>Great post!</p>
<footer>— Aarav, July 28</footer>
</article>
<article>
<p>Very helpful, thanks!</p>
<footer>— Riya, July 28</footer>
</article>
</section>
</article>section use karo jab content ka apna HEADING ho (h2, h3 etc.) aur ek thematic unit ho. Agar sirf styling ke liye group karna hai (koi heading/theme nahi), div use karo.
<!-- section — heading ke saath, thematic unit: -->
<section>
<h2>Customer Reviews</h2>
<p>Reviews content...</p>
</section>
<!-- div — sirf styling wrapper, koi heading/theme nahi: -->
<div class="two-column-layout">
<div class="column">...</div>
<div class="column">...</div>
</div>