लोड हो रहा है...

HTML head

पिछला सत्र दस्तावेज़ head के एक बच्चे पर केंद्रित था: title। अब खुद head तत्व पर ज़ूम करें — वह बॉक्स जो ब्राउज़रों, खोज उपकरणों और लिंक किए गए संसाधनों के लिए पेज के बारे में मेटाडेटा रखता है। आगंतुक head को उसी तरह नहीं पढ़ते जैसे वे मुख्य दृश्य में कोई कहानी पढ़ते हैं। वे इसके प्रभाव टैब लेबल, सही अक्षरों, मोबाइल स्केलिंग, और स्टाइलशीट्स के माध्यम से महसूस करते हैं जो body सामग्री पेंट होने से पहले लोड होती हैं।

head किस लिए है

<head>...</head> <html> के अंदर बैठता है, आमतौर पर खुलते html टैग के ठीक बाद और <body> से पहले। यह मेटाडेटा और संसाधन लिंक के लिए दस्तावेज़ का नियंत्रण कक्ष है। यह कोई दृश्यमान बैनर नहीं है। दृश्यमान पेज बैनर जो आप बाद में <header> तत्व से बना सकते हैं, अलग टैग है और अलग काम करता है।

सीधा उत्तर

मेटाडेटा <head>...</head> में रखें: एक title, आमतौर पर <meta charset="UTF-8">, अक्सर मोबाइल लेआउट के लिए viewport meta, और बाहरी CSS उपयोग करने पर <link rel="stylesheet" href="...">। दृश्यमान शीर्षक, पैराग्राफ, छवियाँ और इंटरैक्टिव UI <body> में रखें। title head का एक महत्वपूर्ण बच्चा है — यह head की जगह नहीं लेता।

सामान्य बच्चे एक झलक में

📊 head के सामान्य बच्चे

तत्व भूमिका
title टैब / दस्तावेज़ लेबल
meta charset वर्ण एन्कोडिंग (UTF-8)
meta viewport मोबाइल चौड़ाई और स्केलिंग संकेत
link stylesheet बाहरी CSS फ़ाइल
style वैकल्पिक आंतरिक CSS
script वैकल्पिक स्क्रिप्ट (प्लेसमेंट आदतें अलग-अलग; कई शुरुआती body के अंत में लोड करते हैं)

एक व्यावहारिक स्टार्टर head

पहले दिन हर संभव meta टैग की ज़रूरत नहीं। एक भरोसेमंद शुरुआती head एन्कोडिंग, मोबाइल viewport, दस्तावेज़ शीर्षक, और जब CSS अलग फ़ाइल में हो तो स्टाइलशीट लिंक कवर करता है।

एक व्यावहारिक स्टार्टर head

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

सैंपल पढ़ना

  • meta charset="UTF-8" ब्राउज़र को बताता है कि अक्षर कैसे डिकोड करें — जिसमें पहले सत्रों के इमोजी और गैर-लैटिन टेक्स्ट शामिल हैं
  • viewport मोबाइल ब्राउज़रों को छोटे ज़ूम-आउट डेस्कटॉप लेआउट के बजाय डिवाइस चौड़ाई उपयोग करने में मदद करता है
  • title टैब को लेबल करता है, जैसा आपने पेज-टाइटल सत्र में अभ्यास किया
  • link rel="stylesheet" हर HTML फ़ाइल में CSS नियम डाले बिना styles.css जोड़ता है
  • आगंतुक पेज पर जो भी पढ़ता है वह body के नीचे बैठता है

Charset पहले, head में जल्दी

charset meta को head के ऊपर के पास रखें ताकि ब्राउज़र दस्तावेज़ के बाकी टेक्स्ट की व्याख्या से पहले एन्कोडिंग जान ले। UTF-8 आधुनिक डिफ़ॉल्ट है जब तक कोई दुर्लभ विरासत बाधा अन्यथा न कहे। गायब या देर से charset टूटे अक्षरों का क्लासिक कारण है जो «यादृच्छिक» भ्रष्टाचार जैसे दिखते हैं।

Viewport और मोबाइल ब्राउज़र

बिना viewport meta के, कई फ़ोन एक चौड़ी डेस्कटॉप कैनवास मान लेते हैं और पेज सिकोड़ देते हैं। सामान्य स्टार्टर width=device-width, initial-scale=1.0 ब्राउज़र से कहता है कि डिवाइस चौड़ाई से मेल खाए और सामान्य ज़ूम से शुरू करे। आप बाद में CSS से रिस्पॉन्सिव डिज़ाइन निखारेंगे; viewport वह HTML-पक्षीय हैंडशेक है जो उन लेआउट को फ़ोन पर उपयोगी बनाता है।

head से CSS लिंक करना

बाहरी स्टाइलशीट प्रस्तुति को संरचना से अलग रखती हैं। head में link तत्व rel="stylesheet" और href पथ के साथ CSS जोड़ने का शुरुआती-अनुकूल तरीका है। पथ उन्हीं फ़ाइल-पथ विचारों का पालन करते हैं जो आपने पहले सीखे। यदि CSS फ़ाइल गायब है, HTML फिर भी काम करता है — बस बिना स्टाइल दिखता है।

head बनाम body बनाम header

  • head — मेटाडेटा और संसाधन लिंक; मुख्य पठनीय लेख नहीं
  • body — दृश्यमान सामग्री जो आगंतुक पढ़ते और उपयोग करते हैं
  • header — body के अंदर बैनर या परिचय ब्लॉक के लिए दृश्यमान सेक्शनिंग तत्व (बाद के लेआउट सत्रों में उपयोग करेंगे)
    head को header नाम न दें यह सोचकर कि वे उपनाम हैं। वे अलग तत्व हैं। भ्रमित करने से अमान्य या अप्रभावी मार्कअप बनता है।

स्क्रिप्ट और head (शुरुआती नोट)

स्क्रिप्ट head या body में आ सकती हैं। कई शिक्षण पेज साधारण स्क्रिप्ट body के अंत में लोड करते हैं ताकि HTML संरचना पहले मौजूद रहे। उन्नत लोडिंग रणनीतियाँ बाद में आती हैं। इस सत्र के लिए जानें कि script head बच्चे के रूप में अनुमत है, लेकिन दृश्यमान सामग्री अभी भी head में नहीं आती।

अपने एडिटर में अभ्यास

  1. html, head, और body वाले बुनियादी HTML कंकाल से शुरू करें।
  2. head के अंदर charset UTF-8, एक viewport meta, और स्पष्ट title जोड़ें।
  3. यदि आपके पास सरल styles.css है तो link जोड़ें (या पथ वास्तविक रखने के लिए खाली फ़ाइल बनाएँ)।
  4. सारा दृश्यमान टेक्स्ट और शीर्षक केवल body में रखें।
  5. View Source या DevTools Elements से पुष्टि करें कि head अनुभाग आपके इरादे से मेल खाता है।
  6. अस्थायी रूप से viewport हटाएँ, संकरी विंडो या फ़ोन एमुलेटर पर रीलोड करें यदि संभव हो, और देखें कि स्केलिंग कितनी अलग लग सकती है — फिर उसे वापस लगाएँ।

आसान गलतियाँ

  • पैराग्राफ, छवियाँ, या मुख्य शीर्षक केवल head में रखना मानो वह पेज कैनवास हो
  • charset भूलना ताकि विशेष अक्षर और इमोजी टूट जाएँ
  • viewport छोड़ना और आश्चर्य कि मोबाइल लेआउट अजीब ज़ूम जैसा क्यों लगता है
  • head (मेटाडेटा) को header (बाद में पाठ्यक्रम में दृश्यमान सेक्शन) से भ्रमित करना
  • मानना कि केवल title काफी है और बहुभाषी पेजों पर charset छोड़ देना
  • गलत पथ से स्टाइलशीट लिंक करना और CSS न लोड होने पर HTML को दोष देना

सारांश

  • head मेटाडेटा और संसाधन लिंक रखता है; body दृश्यमान सामग्री रखता है
  • स्टार्टर टुकड़े: charset, viewport, title, और अक्सर CSS link
  • title head का एक बच्चा है, head का विकल्प नहीं
  • head दृश्यमान header जैसा तत्व नहीं है
  • charset जल्दी रखें ताकि ब्राउज़र दस्तावेज़ सही डिकोड करे

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
6
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 1 का 1
Html ट्यूटोरियल