🟢 Foundation  ·  Lesson 03

HTML Document Structure

HTML Document Structure

The Skeleton every page is built on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>

    Everything visible goes here

</body>
</html>
The envelope analogy: an HTML page is a letter being posted. <head> is the envelope — address, stamp, sender info: essential for delivery but the reader never reads the envelope as the message. <body> is the letter inside — the actual content the reader sees. <html> is the postal cover holding both together, and DOCTYPE is the "SPEED POST" stamp telling the system how to handle it.

Line-by-Line Meaning

LineWhat it really does
<!DOCTYPE html>Tells the browser "this is modern HTML5 — render in standards mode". Without it, browsers switch to quirks mode (old buggy behaviour). Not a tag — a declaration, always line 1.
<html lang="en">Root element wrapping everything. lang helps Google and screen readers know the language (use lang="hi" for Hindi pages).
<meta charset="UTF-8">Character encoding. UTF-8 supports every language — without it, Hindi text can appear as ह garbage. Non-negotiable line.
<title>Text on the browser tab AND the blue clickable line in Google results — the single most important SEO tag.
<body>Every visible thing — headings, images, forms — lives between these tags.

head vs body — the difference that matters

<head>
    <!-- ABOUT the page (invisible) -->
    <title>, <meta>, CSS links, favicon
</head>
<body>
    <!-- ON the page (visible) -->
    <h1>, <p>, <img>, <a>, forms...
</body>
Rule of thumb: head = information ABOUT the page. body = information ON the page.

The Nesting Rule (open last, close first)

<p>This is <b>correct</b> nesting.</p>     ✅

<p>This is <b>wrong nesting.</p></b>     ❌

Tags close in reverse order of opening — like boxes inside boxes: the box you opened last must be closed first. Browsers often forgive this mistake silently, which is worse — the page "works" until one day CSS behaves strangely and you spend an hour finding a crossed tag.

Exam Corner

Q: Is DOCTYPE an HTML tag? No — it is a declaration/instruction to the browser, not an element. It has no closing counterpart.

Q: Can a page work without <head>? It may display, but it loses its title, encoding and SEO identity — like a letter posted without an envelope: it might reach, but nobody knows what it is.

Q: How many <body> tags can a page have? Exactly one. Same for <head> and <html>.

वह Skeleton जिस पर हर page बनता है

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>

    दिखने वाला सब कुछ यहां

</body>
</html>
लिफाफे वाली analogy: HTML page एक post की जा रही चिट्ठी है. <head> लिफाफा है — पता, stamp, sender की जानकारी: delivery के लिए ज़रूरी, पर पढ़ने वाला लिफाफे को message की तरह नहीं पढ़ता. <body> अंदर की चिट्ठी है — असली content जो reader देखता है. <html> दोनों को समेटने वाला postal cover है, और DOCTYPE "SPEED POST" की मोहर जो system को बताती है इसे कैसे handle करना है.

Line-by-Line मतलब

Lineअसल में क्या करती है
<!DOCTYPE html>Browser से कहती है "यह modern HTML5 है — standards mode में दिखाओ". इसके बिना browsers quirks mode (पुराना buggy behaviour) में चले जाते हैं. Tag नहीं — declaration है, हमेशा line 1.
<html lang="en">सबको लपेटने वाला root element. lang Google और screen readers को language बताता है (Hindi pages के लिए lang="hi").
<meta charset="UTF-8">Character encoding. UTF-8 हर language support करता है — इसके बिना Hindi text ह जैसा कचरा दिख सकता है. Non-negotiable line.
<title>Browser tab पर लिखा text AND Google results की नीली clickable line — SEO का सबसे ज़रूरी अकेला tag.
<body>हर दिखने वाली चीज़ — headings, images, forms — इन्हीं tags के बीच रहती है.

head vs body — वह फर्क जो काम आता है

<head>
    <!-- Page ke BAARE me (invisible) -->
    <title>, <meta>, CSS links, favicon
</head>
<body>
    <!-- Page ke UPAR (visible) -->
    <h1>, <p>, <img>, <a>, forms...
</body>
Rule of thumb: head = page ke BAARE me जानकारी. body = page PAR जानकारी.

Nesting Rule (जो बाद में खुला, पहले बंद होगा)

<p>This is <b>correct</b> nesting.</p>     ✅

<p>This is <b>wrong nesting.</p></b>     ❌

Tags खुलने के उल्टे order में बंद होते हैं — डिब्बे के अंदर डिब्बे जैसा: जो डिब्बा आखिर में खोला, पहले वही बंद होगा. Browsers अक्सर यह गलती चुपचाप माफ कर देते हैं, जो और बुरा है — page "चलता" रहता है और एक दिन CSS अजीब behave करती है, और आप एक घंटा crossed tag ढूंढते हैं.

Exam Corner

Q: क्या DOCTYPE एक HTML tag है? नहीं — यह browser के लिए declaration/instruction है, element नहीं. इसका कोई closing हिस्सा नहीं होता.

Q: क्या page बिना <head> के चल सकता है? दिख भले जाए, पर title, encoding और SEO पहचान खो देता है — बिना लिफाफे के post हुई चिट्ठी जैसा: पहुंच भले जाए, कोई जानता नहीं यह क्या है.

Q: एक page में कितने <body> tags हो सकते हैं? Exactly एक. <head> और <html> के लिए भी वही.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.