Tags & Elements
Zyadatar tags pairs mein aate hain: opening (<p>) aur closing (</p>, forward slash ke saath) — beech ka content "element" ka content hai. Kuch tags "self-closing" hain (koi content nahi hota andar) — jaise <img>, <br>, <input> — inhe closing tag ki zaroorat nahi.
Elements ko "nest" kar sakte ho — ek element doosre ke andar. Nesting properly honi chahiye — jo tag baad mein khula, wo pehle band hona chahiye (jaise bracket matching).
<!-- Paired tag: -->
<p>Ye ek paragraph hai.</p>
<!-- Self-closing tags: -->
<img src="photo.jpg" alt="Photo">
<br>
<!-- Nesting — sahi order: -->
<div>
<p>Ye <strong>bold</strong> word ke saath hai.</p>
</div>
<!-- GALAT nesting: -->
<!-- <p><strong>text</p></strong> -->- Opening + closing tag = element (kuch tags self-closing hain)
- Nesting mein order matter karta hai — bracket-matching jaisa
- Self-closing tags (img, br, input) ko closing tag nahi chahiye
Self-closing (void) elements ki ek fixed list hai HTML mein — inhe kabhi closing tag nahi chahiye: img, br, hr, input, meta, link, source, area — koi content nahi hold karte, isliye "close" karne ki zaroorat nahi.
<img src="pic.jpg" alt="pic"> <!-- void — no closing tag -->
<br> <!-- line break -->
<hr> <!-- horizontal rule -->
<input type="text"> <!-- form input -->
<link rel="stylesheet" href="style.css"> <!-- CSS link, head mein -->Block elements (jaise div, p, h1) apni poori line lete hain (naya element hamesha next line par shuru hota hai). Inline elements (jaise span, a, strong) sirf jitni jagah zaroori utni lete hain, same line mein continue rehte hain — ye CSS layout samajhne ke liye foundational concept hai.
<!-- Block — har ek apni line par: -->
<div>Block 1</div>
<div>Block 2</div>
<!-- Inline — same line mein rehte hain: -->
<span>Inline 1</span> <span>Inline 2</span> <strong>bold text</strong>