HTML बेसिक पेज स्ट्रक्चर (HTML Basic Page Structure)

bySidSkills •
0

आज के इंटरनेट युग में हर वेबसाइट, वेबपेज या वेब ऐप के पीछे एक आधारभूत संरचना होती है, जिसे HTML Page Structure कहा जाता है। यह एक ऐसा ढांचा होता है जो ब्राउज़र को निर्देश देता है कि वेबपेज पर क्या दिखाना है और किस क्रम में दिखाना है।

किसी भी HTML दस्तावेज़ की शुरुआत कुछ विशेष टैग्स से होती है, जो पूरे वेबपेज की नींव को निर्धारित करते हैं। ये टैग्स HTML की संरचना का मूल हिस्सा होते हैं। प्रमुख टैग्स निम्नलिखित हैं:

इस लेख में हम ऊपर दिए गए सभी टैग्स के बारे में विस्तार से चर्चा करेंगे।

html-basic-page-structure

<!DOCTYPE html> – डॉक्यूमेंट टाइप डिक्लेरेशन

  • <!DOCTYPE html> HTML दस्तावेज़ की शुरुआत में लिखा जाने वाला एक declaration है, जो ब्राउज़र को बताता है कि यह HTML5 दस्तावेज़ है।
  • यह कोई टैग नहीं है, इसलिए इसे बंद करने की जरूरत नहीं होती (जैसे </!DOCTYPE> नहीं लिखते)।
  • यह ब्राउज़र को सही HTML संस्करण (Version) समझने और वेब पेज को 'स्टैंडर्ड मोड' में प्रदर्शित करने में मदद करता है।
  • इसे HTML फाइल की पहली पंक्ति में ही लिखना जरूरी है, इसके बाद ही <html>, <head>, <body> जैसे टैग्स आते हैं।
  • यह Case-Sensitive नहीं है (DOCTYPE, doctype या DoCtYpE सभी काम करेंगे), लेकिन <!DOCTYPE html> लिखना सबसे अच्छा तरीका माना जाता है।
  • अगर यह न लिखा जाए, तो ब्राउज़र क्विर्क्स मोड में चला जाता है, जिससे पेज का लेआउट गलत हो सकता है, CSS अपेक्षित रूप से कार्य न करे, और अलग-अलग ब्राउज़र में पेज अलग दिख सकता है।
  • HTML5 के लिए यह सबसे सरल DOCTYPE है। पुराने संस्करणों में यह बहुत जटिल था, जैसे:

    • HTML 4:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

    XHTML 1.1:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html> टैग – रूट एलिमेंट

  • <html> टैग HTML दस्तावेज़ की मुख्य संरचना (main structure) को परिभाषित करता है, अर्थात् पूरा वेबपेज इसके अंदर लिखा जाता है।
  • यह DOCTYPE घोषणा के तुरंत बाद लिखा जाता है और सभी अन्य टैग्स (<head>, <body> आदि) इसके अंदर शामिल होते हैं।
  • यह दस्तावेज़ का रूट (root) एलिमेंट है, जिसमें <head> और <body> टैग्स अनिवार्य रूप से आते हैं।
  • यह एक कंटेनर टैग है, इसलिए इसे बंद करना आवश्यक है, उदाहरण: <html> ... </html>।
  • इसमें lang ऐट्रीब्यूट का उपयोग आमतौर पर किया जाता है, जो दस्तावेज़ की भाषा को परिभाषित करता है, जैसे: <html lang="hi"> (हिंदी के लिए) या <html lang="en"> (अंग्रेजी के लिए)। lang ऐट्रीब्यूट ब्राउज़र, स्क्रीन रीडर, और सर्च इंजन ऑप्टिमाइज़ेशन (SEO) को दस्तावेज़ की भाषा और स्क्रिप्ट समझने में मदद करता है, जिससे पहुंच (accessibility) बेहतर होती है।
  • <html> टैग के अंदर दो मुख्य भाग होते हैं:
    • <head>: इसमें मेटा जानकारी, CSS, JavaScript, और पेज का टाइटल शामिल होता है।
    • <body>: इसमें वेबपेज के दिखने वाले कंटेंट जैसे टेक्स्ट, इमेज, लिंक, और अन्य तत्व शामिल होते हैं।
  • HTML5 में <html> टैग की संरचना सरल और स्पष्ट है । जबकि पुराने संस्करणों में अतिरिक्त एट्रिब्यूट्स की जरूरत होती थी।
    •   <html lang="en"> 
	...............
  </html>
  • <head> टैग HTML दस्तावेज़ का एक महत्वपूर्ण हिस्सा होता है। यह टैग वेबपेज के बारे में जानकारी प्रदान करता है, जैसे कि पेज का शीर्षक, मेटा विवरण (Meta Description), कीवर्ड्स, और अन्य आवश्यक विवरण, जो ब्राउज़र और सर्च इंजन को पेज को बेहतर ढंग से समझने में मदद करते हैं।
  • यह एक कंटेनर टैग है, इसलिए इसे बंद करना जरूरी है, उदाहरण: <head>…….</head> ।
  • <head> में दी गई जानकारी आमतौर पर वेबपेज पर दिखाई नहीं देतीं, लेकिन यह ब्राउज़र, सर्च इंजन, और अन्य सेवाओं के लिए महत्वपूर्ण होती है।
  • इसके अंदर सामान्यतः निम्न टैग्स शामिल होते हैं:
    • <title> – पेज का शीर्षक (title), जो ब्राउज़र टैब में दिखाई देता है।
    • <meta> – पेज की वर्णमाला (charset), डिस्क्रिप्शन, कीवर्ड्स आदि के लिए।
    • <link> – External CSS फाइल को जोड़ने के लिए।
    • <style> – Internal CSS स्टाइल के लिए।
    • <script> – JavaScript को जोड़ने या लिखने के लिए।
    • <base> – डिफ़ॉल्ट URL बेस सेट करने के लिए।

      • Example :

      <head>
    <!-- meta Information -->
    <!-- Title of the Web Page -->
    <!-- Base URL for all relative URLs -->
    <!-- External CSS and JavaScript -->
     <!-- Internal CSS and Javascript-- >
<head</>

      1. <title> टैग - वेबपेज का शीर्षक (Title of the Webpage)

    • <title> टैग पेज का नाम (Title) तय करता है। जो नाम आप यहाँ लिखते हैं, वही ब्राउज़र के ऊपर टैब में दिखाई देता है।
    • यदि <title> नहीं दिया जाए, तो ब्राउज़र पेज को Untitled दिखा सकता है और सर्च इंजन पेज की पहचान नहीं कर पाते। जिससे SEO और एक्सेसिबिलिटी पर नकारात्मक प्रभाव पड़ता है।

      • 2. <meta> टैग - मेटा जानकारी

    • यह वेबपेज की मेटा जानकारी (Meta Information) देता है — यानी ऐसी जानकारी जो खुद वेबपेज के बारे में होती है। यह जानकारी ब्राउज़र और सर्च इंजन को यह समझने में मदद करती है कि आपका पेज किस बारे में है।
    • यह सेल्फ-क्लोज़िंग टैग होता है, इसलिए इसे बंद करने की आवश्यकता नहीं होती है।
      • उदाहरण: <meta charset="UTF-8">
    • एक HTML डॉक्युमेंट में एक से अधिक <meta> टैग हो सकते हैं, और हर एक अलग उद्देश्य के लिए होता है।

      • महत्वपूर्ण प्रकार के <meta> टैग्स:

        1. Character Encoding सेट करने के लिए:

      • जब हम वेबपेज में हिंदी, अंग्रेज़ी या किसी भी भाषा के अक्षर लिखते हैं, तो यह जरूरी होता है कि ब्राउज़र उन्हें ठीक से पढ़ और दिखा सके। इसके लिए हम character encoding सेट करते हैं।
        • <meta charset="UTF-8">
      • UTF-8 एक ऐसा encoding तरीका है जो लगभग सभी भाषाओं के अक्षरों को पहचान सकता है, जैसे हिंदी, अंग्रेज़ी, उर्दू आदि। अगर यह सेट नहीं किया गया हो, तो कुछ अक्षर गलत दिखाई दे सकते हैं।

        • 2. Description के लिए (SEO में सहायक):

      • यह टैग सर्च इंजन (जैसे Google) को बताता है कि आपके वेबपेज का विषय क्या है। जब कोई व्यक्ति गूगल पर कुछ सर्च करता है, तो आपकी वेबसाइट का छोटा परिचय (description) उसी के आधार पर दिखाई देता है।
        • <meta name="description" content="Basic HTML Page Structure">

        3. Keywords के लिए (SEO में सहायक):

      • यह टैग पहले सर्च इंजन को यह बताने के लिए इस्तेमाल होता था कि आपके पेज में कौन-कौन से महत्वपूर्ण शब्द (keywords) हैं। हालांकि, अब गूगल जैसे सर्च इंजन इसे SEO में ज़्यादा महत्व नहीं देते है।
        • <meta name="keywords" content="HTML, Tags, Hindi, Computer, ITI, COPA">

        4. Author बताने के लिए:

      • यह टैग बताता है कि इस वेबपेज को किसने बनाया है, यानी इसके लेखक (Author) की जानकारी देता है। इससे सर्च इंजन या ब्राउज़र को यह जानने में मदद मिलती है कि पेज किस व्यक्ति या संस्था द्वारा लिखा गया है।
        • <meta name="author" content="Sidskills">

        5. Viewport सेटिंग (Responsive Design के लिए):

      • जब कोई व्यक्ति आपकी वेबसाइट मोबाइल, टैबलेट या छोटे स्क्रीन वाले डिवाइस पर खोलता है, तो यह टैग पेज को स्क्रीन के अनुसार सही आकार में दिखाने में मदद करता है। इसे Responsive Design के लिए जरूरी माना जाता है।
        • <meta name="viewport" content="width=device-width, initial-scale=1.0">

        6. Refresh या Redirect के लिए:

      • यह टैग वेबपेज को कुछ समय बाद खुद-ब-खुद रीफ्रेश (refresh) करने या किसी अन्य URL पर रीडायरेक्ट (redirect) करने के लिए उपयोग किया जाता है। इसका इस्तेमाल तब होता है जब हम चाहते हैं कि वेबपेज अपने आप नए पेज पर चले जाए या फिर कुछ समय बाद खुद को रिफ्रेश कर ले।
        • <meta http-equiv="refresh" content="5; url=https://sidskill.in">
      • <link> टैग का उपयोग HTML डॉक्युमेंट को किसी बाहरी फाइल (external resource) जैसे CSS फाइल या फेविकॉन से जोड़ने के लिए किया जाता है।
      • यह empty tag है, यानी इसका कोई closing टैग नहीं होता। इसे self-closing भी लिखा जा सकता है, जैसे: <link ... />

        • एक्सटर्नल CSS जोड़ने के लिए

      • यदि आप किसी External CSS फाइल को जोड़ना चाहते हैं, तो <link> टैग में rel="stylesheet" और href="..." एट्रिब्यूट्स का प्रयोग होता है। उदाहरण: <link rel="stylesheet" href="style.css">

        • फेविकॉन (favicon) जोड़ने के लिए

      • फेविकॉन वह छोटा सा आइकन होता है जो ब्राउज़र के टैब में वेबसाइट के नाम के पास दिखता है। इसे <link> टैग के जरिए जोड़ सकते हैं।
        • उदाहरण: <link rel="icon" href="favicon.ico" type="image/x-icon">
      • फाइल के प्रकार (type) में.ico, .png, या .svg फॉर्मेट इस्तेमाल की जा सकती हैं।

        • अन्य उपयोग

      • <link> टैग अन्य रिलेशन जैसे preload, alternate, canonical आदि के लिए भी प्रयोग किया जाता है।
        • उदाहरण: <link rel="canonical" href="https://sidskills.in/current-page">

      4. <style> टैग – इंटरनल CSS लिखने के लिए

      • HTML डॉक्युमेंट के अंदर <style> टैग का उपयोग इंटरनल CSS लिखने के लिए किया जाता है। जब किसी CSS को केवल उसी पेज पर लागू करना हो, या जब प्रोजेक्ट छोटा हो और अलग से CSS फाइल बनाना आवश्यक न हो, तब इंटरनल CSS उपयोगी होता है।
      • <style> टैग का इस्तेमाल HTML पेज में CSS Rule लिखने के लिए किया जाता है, जो पेज के एलिमेंट्स (जैसे टेक्स्ट, रंग, साइज) को स्टाइल करता है।

      5. <script> टैग – JavaScript जोड़ने के लिए

    • <script> टैग का उपयोग HTML डॉक्युमेंट में JavaScript कोड जोड़ने के लिए किया जाता है। यह कोड किसी इवेंट पर काम कर सकता है या पेज लोड होते ही चल सकता है। यह तब उपयोगी होता है, जब वेबसाइट में डायनामिक फीचर्स या इंटरएक्टिविटी जोड़नी हो, जैसे बटन क्लिक पर एक्शन, फॉर्म वैलिडेशन आदि।
    • यह टैग स्क्रिप्ट संबंधी निर्देशों (JavaScript code) को परिभाषित करता है, जो वेबपेज पर लागू होते हैं।
    • <script> टैग को <head> या <body> टैग के अंदर कहीं भी लिखा जा सकता है, लेकिन आमतौर पर इसे बॉडी के अंत में लिखा जाता है, ताकि HTML पहले लोड हो जाए और फिर स्क्रिप्ट चले।
    • यह टैग बाहरी JavaScript फाइल को लिंक करने के लिए भी प्रयोग होता है, JavaScript को बाहरी फाइल (External JS) के रूप में रखना वेबसाइट की स्पीड और मैनेजमेंट के लिए बेहतर होता है। जैसे: <script src="script.js"></script>
    • यदि JavaScript कोड HTML के अंदर ही लिखा गया है, तो इस तरह लिखा जाता है:
      • <script>
	alert("Welcome to our website!");
</script>

<body> टैग – वेबपेज का मुख्य कंटेंट

  • <body> टैग HTML डॉक्यूमेंट का वह हिस्सा होता है, जो वेब पेज पर दिखाई देता है। इसमें टेक्स्ट, इमेजेस, लिंक्स, बटन, और अन्य सभी एलिमेंट्स शामिल होते हैं, जिन्हें उपयोगकर्ता ब्राउज़र विंडो में देखते और इंटरैक्ट करते हैं।
  • <body> टैग, HTML डॉक्युमेंट में <head> टैग के बाद लिखा जाता है और यह पूरे पेज की सामग्री को नियंत्रित करता है।
  • यह एक कंटेनर टैग होता है, यानी इसका opening और closing दोनों टैग होते हैं, जैसे: <body> ... </body>

बेसिक HTML कोड उदाहरण (Basic HTML Code Example)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome!</h1>
    <p>This is my first HTML webpage.</p>
</body>
</html>

विषय से संबंधित कुछ सामान्य प्रश्न (FAQs)

▶ क्या एक HTML पेज में दो <head> टैग हो सकते हैं?
नहीं। एक HTML पेज में सिर्फ एक <head> टैग होना चाहिए। यह टैग पेज के बारे में ज़रूरी जानकारी रखता है, इसलिए दो होने से ब्राउज़र कंफ्यूज हो सकता है।
▶ क्या HTML टैग्स को छोटे या बड़े अक्षरों में लिखने से कोई फर्क पड़ता है?
HTML टैग्स Case-Sensitive नहीं हैं, छोटे या बड़े किसी भी अक्षर में लिखे जा सकते हैं। लेकिन अच्छा तरीका यह है कि हमेशा छोटे अक्षरों का इस्तेमाल करें।
▶ क्या <!DOCTYPE> डिक्लेरेशन के बिना HTML पेज काम कर सकता है?
हाँ, काम तो कर सकता है, लेकिन यह सही तरीका नहीं है। <!DOCTYPE> ब्राउज़र को बताता है कि यह कौन सा HTML वर्जन है। इसके बिना ब्राउज़र अलग तरीके से पेज दिखा सकता है।
▶ क्या <html>, <head> और <body> टैग ज़रूरी हैं?
टेक्निकली, इनके बिना भी पेज दिख जाएगा। लेकिन ये वेब के नियमों के हिसाब से ज़रूरी हैं। ये टैग वेबसाइट को सर्च इंजन और लोगों के लिए बेहतर बनाते हैं।
▶ <script> टैग कहाँ रखना चाहिए?
ज़्यादातर <script> टैग को <body> के आखिर में रखना अच्छा होता है। इससे पेज जल्दी लोड होता है। लेकिन कुछ खास स्क्रिप्ट को <head> में रखा जाना चाहिए।
▶ क्या <meta charset="UTF-8"> को <head> में सबसे पहले रखना ज़रूरी है?
हाँ, इसे सबसे पहले रखना अच्छा है। इससे ब्राउज़र को पता चल जाता है कि पेज के अक्षर किस भाषा में हैं, खासकर अगर पेज में अंग्रेजी के अलावा दूसरी भाषा के अक्षर हों।
▶ Quirks Mode क्या होता है?
Quirks Mode एक ऐसा मोड है, जिसमें ब्राउज़र वेबपेज को पुराने तरीके (पुराने HTML और CSS नियमों) से दिखाता है। यह मोड तब चालू होता है, जब HTML डॉक्युमेंट में <!DOCTYPE> टैग नहीं लिखा जाता या गलत लिखा जाता है।
▶ वेब ब्राउज़र में कितने प्रकार के मोड (Rendering Mode) होते हैं?
वेब ब्राउज़र में मुख्यतः तीन प्रकार के मोड होते हैं:

• Standards Mode – इसमें ब्राउज़र वेबपेज को आधुनिक वेब मानकों के अनुसार प्रदर्शित करता है।
• Quirks Mode – इसमें ब्राउज़र पुराने नियमों के अनुसार वेबपेज को दिखाता है, जो आमतौर पर तब होता है, जब <!DOCTYPE> टैग नहीं लिखा गया हो।
• Almost Standards Mode – यह स्टैंडर्ड्स मोड जैसा ही होता है, लेकिन कुछ पुराने नियमों (quirks) को भी सपोर्ट करता है।

🎥 विषय से संबंधित वीडियो देखें

Tags:

Post a Comment

Previous Post Next Post