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

SidSkills
SidSkills
May 12, 2025
0

आज के डिजिटल दौर में, किसी भी वेबसाइट या वेब ऐप की मजबूती उसके आधार पर टिकी होती है, जिसे हम HTML Page Structure कहते हैं। सरल शब्दों में कहें तो, यह एक ब्लूप्रिंट या ढांचा (Skeleton) है जो ब्राउज़र को यह बताता है कि वेबपेज पर मौजूद कंटेंट (जैसे टेक्स्ट, इमेज, लिंक) को किस व्यवस्थित क्रम में दिखाना है।

HTML Basic Page Structure in Hindi

HTML दस्तावेज़ का ट्री स्ट्रक्चर (Visual Tree Structure)

एक HTML पेज को समझने का सबसे आसान तरीका उसका 'ट्री स्ट्रक्चर' है। यह दर्शाता है कि टैग्स एक-दूसरे से कैसे जुड़े हैं:

<html> (Root: पूरे पेज का आधार)
  ├── <head> (Brain: मेटा डेटा, सेटिंग्स, टाइटल)
  └── <body> (Body: मुख्य सामग्री जो हमें दिखती है)

इस लेख में आप क्या सीखेंगे:

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

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

पुराने वर्ज़न बनाम HTML5 DOCTYPE

HTML5 से पहले DOCTYPE काफी जटिल होते थे। नीचे उनके उदाहरण दिए गए हैं:

HTML 4.01 Example:

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

XHTML 1.1 Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
SEO Tip: यद्यपि DOCTYPE सीधे कीवर्ड रैंकिंग में मदद नहीं करता, लेकिन यह Browser Compatibility और Page Loading Stability सुनिश्चित करता है, जो SEO के लिए महत्वपूर्ण (Core Web Vitals) हैं।

<html> टैग: HTML दस्तावेज़ का रूट (Root) एलिमेंट

<html> टैग किसी भी वेबपेज का आधार होता है। इसे तकनीकी रूप से रूट एलिमेंट (Root Element) कहा जाता है क्योंकि पेज के सभी अन्य एलिमेंट्स इसी के भीतर समाहित होते हैं।

  • मुख्य संरचना: यह ब्राउज़र को सूचित करता है कि यह एक HTML दस्तावेज़ है। यह हमेशा <!DOCTYPE html> के ठीक बाद शुरू होता है।
  • कंटेनर टैग: यह एक "पेयर्ड टैग" है, जिसे <html> से शुरू और </html> पर समाप्त करना अनिवार्य है।
  • Language Attribute (SEO): इसमें lang ऐट्रीब्यूट का उपयोग SEO (Search Engine Optimization) और एक्सेसिबिलिटी के लिए अनिवार्य है। उदाहरण के लिए: <html lang="hi"> सर्च इंजन को बताता है कि आपका कंटेंट हिंदी में है।
  • दो मुख्य भाग: इसके अंदर दो अनिवार्य भाग होते हैं जो पेज की बॉडी बनाते हैं:
    • <head>: मेटा डेटा, टाइटल और सर्च इंजन सेटिंग्स के लिए।
    • <body>: वह सारा कंटेंट जो यूजर को वेबपेज पर दिखाई देता है।

<head> टैग – मेटाडेटा और सेटिंग्स

  • <head> टैग HTML दस्तावेज़ का एक महत्वपूर्ण हिस्सा होता है। यह टैग वेबपेज के बारे में जानकारी प्रदान करता है, जैसे कि पेज का शीर्षक, मेटा विवरण (Meta Description), कीवर्ड्स, और अन्य आवश्यक विवरण, जो ब्राउज़र और सर्च इंजन को पेज को बेहतर ढंग से समझने में मदद करते हैं।
  • यह एक कंटेनर टैग है, इसलिए इसे बंद करना जरूरी है, उदाहरण: <head>…….</head> ।
  • <head> में दी गई जानकारी आमतौर पर वेबपेज पर दिखाई नहीं देतीं, लेकिन यह ब्राउज़र, सर्च इंजन, और अन्य सेवाओं के लिए महत्वपूर्ण होती है।
  • इसके अंदर सामान्यतः निम्न टैग्स शामिल होते हैं:
    • <title> – पेज का शीर्षक (title), जो ब्राउज़र टैब में दिखाई देता है।
    • <meta> – पेज की वर्णमाला (charset), डिस्क्रिप्शन, कीवर्ड्स आदि के लिए।
    • <link> – External CSS फाइल को जोड़ने के लिए।
    • <style> – Internal CSS स्टाइल के लिए।
    • <script> – JavaScript को जोड़ने या लिखने के लिए।
    • <base> – डिफ़ॉल्ट URL बेस सेट करने के लिए।
HTML Head Tag Example with Meta, Title and Links
HTML Head Section – मेटा डेटा, टाइटल और एक्सटर्नल फाइल्स का उदाहरण

<head> टैग के अंदर की ये सभी चीज़ें वेबसाइट के पीछे (Back-end) काम करती हैं और सीधे वेबपेज पर दिखाई नहीं देतीं।

कोडिंग के नियमों के अनुसार, मेटा टैग्स और टाइटल को सबसे ऊपर रखना अच्छी आदत मानी जाती है।

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

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

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 के अंदर ही लिखा गया है, तो इस तरह लिखा जाता है:
    • HTML में JavaScript Script Tag का उदाहरण
    HTML दस्तावेज़ में JavaScript (Script Tag) का उपयोग

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

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

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

HTML Basic Page Structure in Hindi
HTML Basic Page Structure - वेबपेज की आधारभूत संरचना

HTML Basic Structure - Exam Oriented 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) को भी सपोर्ट करता है।

🎥 Watch Our YouTube Videos

▶ Visit Our YouTube Channel
Tags:
HTML

You Might Like

Show more
HTML

Post a Comment

0 Comments

Post a Comment (0)

#buttons=(Ok, Go it!) #days=(20)

Our website uses cookies to enhance your experience. Check Now
Ok, Go it!
Share to other apps
Copy Post Link