2. HTML Document Structure in Detail
DOCTYPE se lekar Meta tags tak, ek professional HTML boilerplate ka har ek element deeply decode karein.
1. Document Declaration: <!DOCTYPE html>
Basic: Yeh line browser ko batati hai ki file HTML hai.
Pro: Yeh koi HTML tag nahi hai, balki ek Instruction (Document Type Declaration) hai. Purane HTML4 mein DTD bohot lamba hota tha jisme strict rules the. HTML5 ne isko simple kar diya. Agar aap ise nahi lagate, toh browser 'Quirks Mode' mein chala jata hai jahan wo styling ka guess work karta hai, jisse layout break ho sakta hai.
2. The Root Element: <html lang="en">
Basic: Yeh sabse bada container tag hota hai jiske andar pura webpage hota hai.
Pro: Ise Root Element kehte hain. Isme lang attribute zarur dena chahiye. Isse Screen Readers aur Google Translate ko bata chalta hai ki page ki default language kya hai, jisse Accessibility (A11Y) aur SEO improve hota hai.
3. The Invisible Brain: <head>
Basic: <head> mein wo settings hoti hain jo user ko direct screen par nahi dikhti, par site ke chalne ke liye zaruri hain.
Pro: <head> browser aur search engine ka control room hai. Jab browser page load karta hai, wo pehle head ko parse karta hai. Agar head mein external heavy JS scripts hain, toh wo 'Render Blocking' kar dengi (screen blank rahegi). Isliye CSS head mein rakhte hain aur heavy JS body ke bottom mein.
4. The Visible Content: <body>
Basic: User ko jo text, image, video dikhti hai wo sab <body> ke andar likha jata hai.
Pro: DOM hierarchy mein body hi aakhri parent hai UI rendering ke liye. CSS ka background color aur global fonts mostly body element par hi lagaye jate hain.
5. Character Encoding: <meta charset="UTF-8">
Basic: Yeh batata hai ki page par emojis aur text ko kaise display karna hai.
Pro: Computer sirf 0 aur 1 (binary) samajhta hai. Encoding text ko binary mein badalti hai. UTF-8 duniya ki almost sari languages support karta hai. Agar ye tag miss hoga, toh Hindi ya Emojis (😊) ajeeb symbols () mein badal jayenge, jise Mojibake kehte hain.
6. Viewport Settings for Mobile Responsiveness
Pro: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Responsive Web Design (RWD) ki jaan hai. Bina is tag ke, mobile browser sochega ki website desktop ke liye hai aur usko extreme zoom-out kar dega (text read karna impossible hoga). width=device-width device ki original width set karta hai.