3. HTML Elements & Tags Breakdown
Opening/Closing tags, Empty tags aur Block vs Inline elements ke deep technical concepts clear karein.
1. Opening & Closing Tags Syntax
Basic: Tag angle brackets < > mein hote hain. Content ko opening <p> aur closing </p> tag ke beech likha jata hai.
Pro: Element ka poora set (opening tag + content + closing tag) milkar ek DOM Node banata hai. Agar developer closing tag lagana bhool jaye, toh modern browsers auto-correct (DOM healing) ki koshish karte hain, par ye hamesha sahi nahi hota aur complex UI layouts tod deta hai.
2. Self-Closing (Void/Empty Elements)
Basic: Kuch tags ke andar koi content nahi ja sakta, isliye unhe close karne ki zaroorat nahi padti (e.g., <img>, <br>).
Pro: Inhe Void Elements kehte hain. Ye elements normally attributes ke through information receive karte hain (jaise src in img). XHTML era mein inke end mein trailing slash (/>) lagana lazmi tha, par HTML5 mein iski strictness khatam kar di gayi hai.
3. DOM Nesting Rules (Parent-Child)
Basic: Ek tag ke andar dusra tag rakhna nesting kehlata hai. Jise aakhir mein khola hai, use sabse pehle band karna padta hai.
Pro: Nesting se Node Tree (DOM) banta hai jisme Parent, Child aur Sibling relationships banti hain. JavaScript isi nesting structure ka use karke elements ko traverse karti hai (e.g., element.parentNode, element.childNodes). Galat nesting (overlapping tags) code crash ka karan banti hai.
4. Block-Level Elements (Crucial for Layouts)
Basic: Block element screen par poori width capture kar leta hai. Naya block element hamesha nayi line (new row) se shuru hota hai. (e.g., <div>, <p>, <h1>).
Pro: CSS ki bhasha mein inka display: block; hota hai. Inhe box-model properties jaise exact width, height, top aur bottom margins di ja sakti hain. Ek block element ke andar block aur inline dono elements aa sakte hain.
5. Inline Elements
Basic: Inline elements sirf utni hi jagah lete hain jitna unka text hota hai aur usi line mein aage chalte jate hain. (e.g., <span>, <a>, <strong>).
Pro: Inka CSS rule display: inline; hota hai. Inline elements ka ek strict rule hai: Aap inme top aur bottom margins ya explicit width/height set nahi kar sakte! Aisa karne ke liye aapko pehle unhe CSS se display: inline-block; mein badalna hoga. HTML standards ke mutabiq inline element ke andar block element rakhna strict error mana jata hai.