🏗️
Basics

Document Structure

DOCTYPE, html, head, body
💡 HTML document ek formal letter jaisa hai — ek fixed structure hai jo har baar follow karna hota hai: header info (head — jo reader nahi dekhta directly), phir actual message (body — jo reader dekhta hai).

<!DOCTYPE html> browser ko batata hai "ye ek modern HTML5 document hai" — pehli line honi zaroori hai. <html> poore document ka root/container hai. Uske andar do main hisse: <head> (metadata — title, links to CSS, meta tags — jo screen par directly nahi dikhta) aur <body> (actual visible content).

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <!-- Yahan sab kuch visible hota hai -->
  <h1>Welcome</h1>
</body>
</html>
🏗️
HTML document ek formal letter jaisa hai — ek fixed structure hai jo har baar follow karna hota hai: header info (head — jo reader nahi dekhta directly), phir actual message (body — jo reader dekhta hai).
1 / 2
⚡ झट से Recap
  • <!DOCTYPE html> = "ye HTML5 hai" declaration, sabse pehli line
  • <head> = metadata (invisible), <body> = visible content
  • lang="hi" attribute accessibility aur SEO dono ke liye helpful hai
इस page में (2 subtopics)

<meta charset="UTF-8"> batata hai browser ko konsi character encoding use karni hai — UTF-8 almost universal standard hai, jo duniya ki saari languages (Hindi, emoji, special characters) properly display karta hai. Bina iske, special characters galat dikh sakte hain (jaise "à" ki jagah garbage symbols).

<head>
  <meta charset="UTF-8">   <!-- hamesha likho, sabse pehli meta tag ke roop mein -->
</head>
⚠️Common Mistake: meta charset bhoolna ya UTF-8 ke alawa kuch use karna Hindi/emoji/special characters ko galat display kar sakta hai — hamesha UTF-8 use karo, aur head mein sabse pehle likho.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> mobile devices par sahi rendering ke liye zaroori hai — bina iske, mobile browsers page ko "desktop size" mein render karke zoom-out kar dete hain, jo bura lagta hai.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
💡Tip: Ye tag responsive design (CSS media queries) ke saath kaam karta hai — viewport tag ke bina, CSS media queries bhi mobile par sahi kaam nahi karengi.