1. ऐतिहासिक पृष्ठभूमि: टिम बर्नर्स-ली और सर्न (CERN)

1980 के दशक के उत्तरार्ध में स्विट्जरलैंड के जिनेवा में स्थित यूरोपीय परमाणु अनुसंधान संगठन (CERN) में कार्यरत भौतिक वैज्ञानिकों के सामने एक बड़ी तकनीकी चुनौती थी: दुनिया भर के विभिन्न ऑपरेटिंग सिस्टम वाले कंप्यूटरों पर शोध पत्रों को बिना प्रारूप बिगड़े साझा कैसे किया जाए। वर्ष 1989 में ब्रिटिश कंप्यूटर वैज्ञानिक सर टिम बर्नर्स-ली (Sir Tim Berners-Lee) ने एक क्रांतिकारी विचार प्रस्तावित किया: क्लिक करने योग्य लिंक्स द्वारा जुड़े दस्तावेजों का एक वैश्विक जाल, जिसे वर्ल्ड वाइड वेब (World Wide Web - WWW) का नाम दिया गया।

कंप्यूटरों पर वेब दस्तावेजों को एक समान रूप से प्रदर्शित करने के लिए बर्नर्स-ली ने 1991 में HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) के पहले संस्करण का आविष्कार किया। वर्ष 1993 में इस तकनीक को सार्वजनिक और निःशुल्क कर दिया गया, जिसने आधुनिक डिजिटल इंटरनेट क्रांति को जन्म दिया।

2. नाम का विश्लेषण: HTML क्या है?

HyperText Markup Language के प्रत्येक शब्द का एक निश्चित और महत्वपूर्ण तकनीकी अर्थ है:

• हाइपरटेक्स्ट (HyperText): सामान्य मुद्रित पुस्तकों में पठन एक रेखीय (Linear) क्रम में होता है, जहाँ पाठक पहले पन्ने से दूसरे पन्ने की ओर क्रमिक रूप से आगे बढ़ता है। इसके विपरीत, हाइपरटेक्स्ट अरेखीय (Non-linear) नेविगेशन की सुविधा देता है। वेब पेज पर मौजूद किसी शब्द या चित्र पर क्लिक करके उपयोगकर्ता तुरंत उसी पेज के किसी अन्य भाग, उसी सर्वर के दूसरे पेज, या दुनिया के किसी भी कोने में स्थित सर्वर पर जा सकता है।
• मार्कअप (Markup): पारंपरिक छपाई और प्रकाशन उद्योग में संपादक पांडुलिपियों के हाशिये पर लाल या नीली कलम से निर्देश लिखते थे—जैसे 'इसे मोटा (बोल्ड) करें', 'इसे मुख्य शीर्षक बनाएं', या 'नया अनुच्छेद शुरू करें'। वेब डिजाइन में मार्कअप का अर्थ विशेष डिजिटल संकेतों (टैग्स) से है जो कोण कोष्ठकों (Angle Brackets) के भीतर लिखे जाते हैं और वेब ब्राउज़र को यह निर्देश देते हैं कि उस टेक्स्ट को स्क्रीन पर कैसे सजाना और दिखाना है।
• लैंग्वेज / भाषा (Language): HTML का अपना एक मानकीकृत व्याकरण, शब्दावली और सिंटैक्स नियम होते हैं, जिन्हें वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा तय किया जाता है। यही कारण है कि पटना में बनाया गया वेब पेज लंदन, टोक्यो या न्यूयॉर्क के किसी भी कंप्यूटर पर बिल्कुल एक जैसा दिखता है।

3. अनिवार्य स्पष्टीकरण: HTML प्रोग्रामिंग भाषा क्यों नहीं है?

विद्यार्थियों के बीच यह आम भ्रम होता है कि वे HTML को एक 'प्रोग्रामिंग भाषा' कह देते हैं। कंप्यूटर विज्ञान के दृष्टिकोण से, एक वास्तविक प्रोग्रामिंग भाषा (जैसे C, Python, Java) में गणना करने, तार्किक निर्णय लेने (IF...ELSE), बार-बार लूप चलाने (FOR, WHILE) और मेमोरी में चर (Variables) स्टोर करने की क्षमता होती है।

HTML में कोई प्रोग्रामिंग तर्क नहीं होता। आप विशुद्ध HTML में दो संख्याओं को जोड़ने का प्रोग्राम या पासवर्ड जांचने का कोड नहीं लिख सकते। HTML केवल एक संरचनात्मक दस्तावेज़ प्रारूपण मार्कअप भाषा है। इसका एकमात्र कार्य वेब पेज के अंगों की बनावट, रूपरेखा और दिखावट को तय करना है।

4. HTML सीखने और लिखने के लिए आवश्यक मूलभूत उपकरण

HTML सीखने के लिए किसी महंगे सॉफ्टवेयर या बड़े विकास वातावरण की आवश्यकता नहीं होती। किसी भी कंप्यूटर पर केवल दो बुनियादी उपकरणों से काम शुरू किया जा सकता है:

1. साधारण टेक्स्ट एडिटर (Plain Text Editor): HTML कोड लिखने के लिए उपयोग होने वाला सॉफ्टवेयर। विंडोज़ कंप्यूटर में पहले से मौजूद नोटपैड (Notepad), मैक पर TextEdit (प्लेन मोड में), या उन्नत एडिटर जैसे VS Code या Notepad++ का उपयोग किया जाता है। ध्यान रखें कि MS Word जैसे वर्ड प्रोसेसर का उपयोग HTML लिखने के लिए कभी नहीं करना चाहिए, क्योंकि वे कोड में अपनी गुप्त फॉर्मेटिंग जोड़ देते हैं।
2. वेब ब्राउज़र (Web Browser): HTML कोड को पढ़कर उसे सुंदर और दृश्यमान वेब पेज के रूप में बदलने वाला सॉफ्टवेयर। प्रमुख आधुनिक ब्राउज़रों में गूगल क्रोम (Google Chrome), मोज़िला फ़ायरफ़ॉक्स (Mozilla Firefox), माइक्रोसॉफ्ट एज (Microsoft Edge) और सफारी (Apple Safari) शामिल हैं।

HTML फाइल को हमेशा .html या .htm एक्सटेंशन के साथ सेव किया जाता है (जैसे my_school.html)। जब इस फाइल पर डबल-क्लिक किया जाता है, तो ऑपरेटिंग सिस्टम इसे सीधे वेब ब्राउज़र में खोलकर प्रदर्शित करता है।

1. संरचनात्मक इकाइयां: टैग, एलिमेंट और एट्रिब्यूट

HTML में वेब पेज तैयार करने के लिए तीन बुनियादी सिंटैक्स इकाइयों की समझ आवश्यक है:

• HTML टैग (Tag): कोण कोष्ठकों (< और >) के भीतर बंद एक विशेष निर्देश शब्द। टैग ब्राउज़र को यह बताता है कि सामग्री किस प्रकार प्रदर्शित होगी। उदाहरण के लिए, <p> टैग ब्राउज़र को बताता है कि यहाँ से एक नया पैराग्राफ शुरू होता है। टैग केस-इनसेंसिटिव (Case-insensitive) होते हैं, अर्थात <HTML> और <html> में ब्राउज़र कोई अंतर नहीं करता, किंतु आधुनिक W3C मानक के अनुसार सभी टैग हमेशा छोटे अक्षरों (Lowercase) में ही लिखने चाहिए।
• HTML एलिमेंट (Element): प्रारंभिक टैग (Opening Tag) से लेकर अंतिम टैग (Closing Tag) तक की संपूर्ण सामग्री, जिसमें बीच का टेक्स्ट भी शामिल होता है, एक एलिमेंट कहलाती है। जैसे: <h1>बिहार बोर्ड परीक्षा</h1> एक संपूर्ण हेडिंग एलिमेंट है।
• HTML एट्रिब्यूट (Attribute): किसी एलिमेंट के व्यवहार या दिखावट को अतिरिक्त रूप से नियंत्रित करने वाले विशेष गुण। एट्रिब्यूट को हमेशा प्रारंभिक टैग के भीतर ही लिखा जाता है। इसका मानक प्रारूप name="value" होता है। उदाहरण के लिए, <p align="center"> में align एट्रिब्यूट का नाम है और "center" उसका मान है।

2. कंटेनर टैग्स बनाम एम्प्टी (शून्य) टैग्स

बिहार बोर्ड की परीक्षाओं में टैग्स के इन दो वर्गों पर अनिवार्य रूप से प्रश्न पूछे जाते हैं:

3. HTML दस्तावेज़ की अनिवार्य मूल संरचना (Boilerplate Architecture)

प्रत्येक वैध HTML वेब पेज निम्नलिखित चार-स्तरीय पदानुक्रम का पालन करता है:

<!DOCTYPE html>
<html>
  <head>
    <title>ब्राउज़र टैब पर दिखने वाला शीर्षक</title>
  </head>
  <body>
    <h1>वेब पेज का मुख्य शीर्षक</h1>
    <p>यह वह दृश्यमान सामग्री है जो स्क्रीन पर दिखाई देती है।</p>
  </body>
</html>

इन मूलभूत अंगों का विवरण:

1. <!DOCTYPE html>: यह कोई टैग नहीं है, बल्कि वेब ब्राउज़र को यह बताने वाला एक निर्देश है कि यह दस्तावेज़ आधुनिक HTML5 मानकों पर आधारित है। इसे हमेशा सबसे पहली पंक्ति में लिखा जाता है।
2. <html>...</html>: यह रूट (मूल) कंटेनर टैग है जो पूरे वेब पेज को अपने भीतर समेटे रहता है। यह ब्राउज़र को बताता है कि वेब पेज कहाँ से शुरू और कहाँ खत्म हो रहा है।
3. <head>...</head>: दस्तावेज़ का शीर्ष भाग। इसमें पेज के बारे में प्रशासनिक जानकारी (मेटाडेटा) और शीर्षक होता है। ध्यान रहे कि <head> के भीतर की सामग्री मुख्य स्क्रीन पर प्रदर्शित नहीं होती।
4. <title>...</title>: यह <head> के भीतर स्थित होता है और वेब पेज का नाम तय करता है, जो ब्राउज़र के सबसे ऊपर टैब और बुकमार्क में दिखाई देता है।
5. <body>...</body>: मुख्य शरीर। उपयोगकर्ता को स्क्रीन पर दिखने वाली समस्त सामग्री—शीर्षक, पैराग्राफ, सूचियां, टेबल और लिंक—इसी टैग के भीतर लिखी जाती है।

1. शीर्षकों का पदानुक्रम: <h1> से <h6> तक

HTML में पाठ को सुव्यवस्थित करने के लिए 6 स्तरों के शीर्षक टैग उपलब्ध हैं, जो <h1> (सबसे बड़ा और सर्वाधिक महत्वपूर्ण) से लेकर <h6> (सबसे छोटा और न्यूनतम महत्वपूर्ण) तक होते हैं। ये ठीक वैसे ही कार्य करते हैं जैसे किसी पाठ्यपुस्तक में मुख्य पाठ का शीर्षक, उप-शीर्षक और खंड-शीर्षक होते हैं।

सभी हेडिंग टैग कंटेनर टैग होते हैं। जब ब्राउज़र किसी हेडिंग टैग को देखता है, तो वह स्वचालित रूप से टेक्स्ट को गहरे मोटे (Bold) अक्षरों में बदल देता है और उसके ऊपर तथा नीचे एक खाली पंक्ति (मार्जिन) जोड़ देता है।

2. पैराग्राफ एलिमेंट: <p>...</p>

साधारण पाठ को अनुच्छेदों में बांटने के लिए <p>...</p> टैग का उपयोग किया जाता है। वेब ब्राउज़र प्रत्येक पैराग्राफ के ऊपर और नीचे अपने आप थोड़ी खाली जगह छोड़ देता है, जिससे पाठ पढ़ने में सुगम और स्पष्ट दिखाई देता है।

रिक्त स्थान संकुचन की परिघटना (Whitespace Collapsing): नए विद्यार्थी अक्सर टेक्स्ट के बीच जगह बढ़ाने के लिए नोटपैड में कई बार स्पेसबार दबाते हैं या कई बार Enter दबाते हैं। HTML में वेब ब्राउज़र लगातार दिए गए कई स्पेस, टैब या एंटर को समेटकर केवल एक एकल स्पेस में बदल देता है। यदि आपको अतिरिक्त लाइन या दूरी चाहिए, तो आपको कीबोर्ड के बजाय HTML टैग्स का उपयोग करना होगा।

3. लाइन ब्रेक टैग: <br>

जब आप किसी वाक्य को वहीं समाप्त करके अगली पंक्ति से नया शब्द शुरू करना चाहते हैं, किंतु पैराग्राफ जितनी बड़ी खाली जगह नहीं छोड़ना चाहते, तब लाइन ब्रेक टैग <br> का प्रयोग किया जाता है।

• यह एक एम्प्टी टैग है; इसे कभी बंद नहीं किया जाता।
• दैनिक प्रयोग: कविता की पंक्तियां, गीत के बोल, या डाक पता लिखने में, जहाँ प्रत्येक पंक्ति तुरंत अगली पंक्ति के नीचे आनी चाहिए:

<p>
  बिहार विद्यालय परीक्षा समिति,<br>
  सिन्हा लाइब्रेरी रोड,<br>
  पटना - 800017, बिहार।
</p>

4. क्षैतिज विभाजक रेखा टैग: <hr>

हॉरिजॉन्टल रूल टैग <hr> एक एम्प्टी टैग है जो वेब पेज की चौड़ाई के आर-पार एक क्षैतिज रेखा खींच देता है। इसका उपयोग दो असंबंधित विषयों को आपस में अलग करने या किसी लेख की समाप्ति दर्शाने के लिए किया जाता है।

<hr> टैग के प्रमुख एट्रिब्यूट्स:

• width: रेखा की लंबाई तय करता है (जैसे width="80%" या width="500")।
• size: रेखा की मोटाई या ऊंचाई पिक्सेल में तय करता है (जैसे size="5")।
• color: रेखा का रंग निर्धारित करता है (जैसे color="red" या color="navy")।
• align: रेखा का संरेखण तय करता है (align="center", left, right)।

1. टेक्स्ट स्वरूपण: भौतिक बनाम तार्किक टैग्स (Physical vs Logical)

HTML में वाक्यों के भीतर शब्दों की बनावट बदलने के लिए कई फॉर्मेटिंग टैग्स दिए गए हैं। कंप्यूटर विज्ञान में इन्हें दो श्रेणियों में बांटा जाता है:

• भौतिक टैग्स (Physical Tags): वे टैग जो ब्राउज़र को केवल दृश्यमान रूप बदलने का आदेश देते हैं (जैसे 'इसे बोल्ड करो' या 'तिरछा करो')। इनका कोई गहरा व्याकरणिक या तार्किक अर्थ नहीं होता।
• तार्किक टैग्स (Logical / Semantic Tags): वे टैग जो पाठ के संरचनात्मक महत्व या संदर्भ को स्पष्ट करते हैं। दृष्टिबाधित लोगों द्वारा उपयोग किए जाने वाले स्क्रीन-रीडर सॉफ्टवेयर इन टैग्स को देखकर आवाज़ में विशेष जोर देकर पढ़ते हैं।

2. आवश्यक टेक्स्ट फॉर्मेटिंग टैग्स तालिका

3. वैज्ञानिक और गणितीय अंकन: सबस्क्रिप्ट और सुपरस्क्रिप्ट

कक्षा 7 की परीक्षा में रासायनिक सूत्रों और गणितीय घातों को प्रदर्शित करने वाले दो टैग्स अत्यंत महत्वपूर्ण हैं:

क. सबस्क्रिप्ट टैग: <sub>...</sub> (पादांक)

सबस्क्रिप्ट टैग अक्षरों या संख्याओं को सामान्य आधार रेखा (Baseline) से नीचे और थोड़े छोटे आकार में प्रदर्शित करता है। इसका उपयोग रासायनिक सूत्रों में अणुओं की संख्या लिखने के लिए किया जाता है:

• जल का सूत्र: H<sub>2</sub>O स्क्रीन पर H₂O दिखता है।
• सल्फ्यूरिक एसिड: H<sub>2</sub>SO<sub>4</sub> स्क्रीन पर H₂SO₄ दिखता है।
• कार्बन डाइऑक्साइड: CO<sub>2</sub> स्क्रीन पर CO₂ दिखता है।

ख. सुपरस्क्रिप्ट टैग: <sup>...</sup> (घातांक)

सुपरस्क्रिप्ट टैग अक्षरों या संख्याओं को सामान्य आधार रेखा से ऊपर और थोड़े छोटे आकार में प्रदर्शित करता है। इसका उपयोग गणितीय घातों (Powers) और तिथियों के लिए किया जाता है:

• पाइथागोरस प्रमेय: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> स्क्रीन पर a² + b² = c² दिखता है।
• बीजगणितीय सूत्र: (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup> स्क्रीन पर (a + b)² = a² + 2ab + b² दिखता है।
• तिथि सूचक: 15<sup>th</sup> August स्क्रीन पर 15^th August दिखता है।

4. फ़ॉन्ट और बैकग्राउंड का रंग बदलना

पारंपरिक HTML में अक्षरों की शैली बदलने के लिए <font> टैग तथा पेज का रंग बदलने के लिए <body> एट्रिब्यूट्स का उपयोग किया जाता था:

• <font face="Arial" size="4" color="blue">सूचना</font>: लिखावट का प्रकार (face), आकार (1 से 7 तक) और रंग तय करता है।
• <body bgcolor="#e0f2fe" text="#0f172a">: पूरे पेज की पृष्ठभूमि का रंग (bgcolor) और सामान्य अक्षरों का रंग (text) निर्धारित करता है।

1. वेब पेज में सूचियों (Lists) का महत्व

लंबे पैराग्राफ पढ़ने में उबाऊ होते हैं और उनमें से महत्वपूर्ण बिंदु खोजना कठिन होता है। सूचियां सूचनाओं को छोटे, व्यवस्थित और पठनीय बिंदुओं में बांट देती हैं, जिससे पाठक जानकारी को शीघ्रता से समझ सकते हैं।

HTML में मुख्य रूप से तीन प्रकार की सूचियां होती हैं: अक्रमित सूचियां (Unordered), क्रमित सूचियां (Ordered) और विवरण सूचियां (Description)।

2. अक्रमित (बुलेटेड) सूचियां: <ul>...</ul>

अक्रमित सूची (Unordered List) का उपयोग तब किया जाता है जब मदों (Items) का कोई निश्चित क्रम या प्राथमिकता आवश्यक न हो (जैसे खरीदारी की सूची या विषयों के नाम)। पूरी सूची को <ul>...</ul> टैग में रखा जाता है, और प्रत्येक बिंदु को <li>...</li> (List Item) टैग में लिखा जाता है।

बुलेट के आकार को type एट्रिब्यूट द्वारा बदला जा सकता है:

• type="disc": डिफ़ॉल्ट रूप; ठोस भरा हुआ काला गोल बिंदु।
• type="circle": खोखला गोलाकार छल्ला।
• type="square": ठोस भरा हुआ चौकोर बिंदु।

<ul type="square">
  <li>कंप्यूटर विज्ञान</li>
  <li>गणित</li>
  <li>विज्ञान</li>
</ul>

3. क्रमित (क्रमांकित) सूचियां: <ol>...</ol>

क्रमित सूची (Ordered List) का उपयोग तब किया जाता है जब मदों का क्रम, चरण या संख्यात्मक वरीयता अत्यंत महत्वपूर्ण हो (जैसे चाय बनाने की विधि या एल्गोरिदम के चरण)। पूरी सूची को <ol>...</ol> में और प्रत्येक बिंदु को <li>...</li> में लिखा जाता है।

नंबरिंग के प्रकार को दो प्रमुख एट्रिब्यूट्स द्वारा नियंत्रित किया जाता है:

4. नेस्टेड सूचियां (सूचियों के भीतर सूचियां)

जब किसी सूची के एक बिंदु (<li>) के भीतर एक दूसरी पूरी सूची डाल दी जाती है, तो उसे नेस्टेड सूची (Nested List) कहा जाता है। इसका उपयोग बहु-स्तरीय रूपरेखा तैयार करने में होता है:

<ol type="1">
  <li>हार्डवेयर उपकरण
    <ul type="circle">
      <li>सेंट्रल प्रोसेसिंग यूनिट (CPU)</li>
      <li>रैम (RAM)</li>
    </ul>
  </li>
  <li>सॉफ्टवेयर उपकरण
    <ul type="circle">
      <li>ऑपरेटिंग सिस्टम</li>
      <li>एप्लिकेशन सॉफ्टवेयर</li>
    </ul>
  </li>
</ol>

5. विवरण सूचियां: <dl>, <dt>, <dd>

विवरण सूची (Description List) शब्दावली या परिभाषाओं को दर्शाने के लिए होती है:

• <dl>...</dl>: मुख्य विवरण सूची कंटेनर।
• <dt>...</dt>: परिभाषा पद (Definition Term - जिस शब्द को परिभाषित करना है)।
• <dd>...</dd>: परिभाषा विवरण (Definition Description - उस शब्द की व्याख्या)।

1. हाइपरलिंक्स का दर्शन और महत्व

वर्ल्ड वाइड वेब को अन्य सभी संचार माध्यमों से अलग और अद्वितीय बनाने वाली सबसे प्रमुख विशेषता हाइपरलिंक (Hyperlink) है। हाइपरलिंक किसी टेक्स्ट या चित्र में छिपा हुआ एक सक्रिय संपर्क सूत्र होता है, जो दुनिया भर के कंप्यूटरों में रखे वेब दस्तावेजों को आपस में जोड़ता है। जब कोई उपयोगकर्ता हाइपरलिंक पर क्लिक करता है, तो ब्राउज़र तुरंत उस नए पते पर पहुंच जाता है।

2. एंकर टैग: <a>...</a>

HTML में किसी भी प्रकार का हाइपरलिंक बनाने के लिए एंकर टैग (Anchor Tag) <a>...</a> का उपयोग किया जाता है। यह एक कंटेनर टैग है जो उस शब्द को घेरता है जिस पर उपयोगकर्ता क्लिक करेगा।

किंतु केवल <a>क्लिक करें</a> लिखने से लिंक काम नहीं करेगा। इसे कार्यशील बनाने के लिए इसका सबसे महत्वपूर्ण एट्रिब्यूट href (Hypertext Reference) लगाना अनिवार्य है। href उस गंतव्य वेब पते (URL) को बताता है जहाँ क्लिक करने पर जाना है:

<a href="https://www.targetexams.com">टारगेट एग्जाम्स पोर्टल पर जाएं</a>

यहाँ स्क्रीन पर उपयोगकर्ता को नीले रंग में "टारगेट एग्जाम्स पोर्टल पर जाएं" दिखाई देगा, जिस पर क्लिक करते ही वेबसाइट खुल जाएगी।

3. हाइपरलिंक्स का वर्गीकरण

4. नई विंडो में लिंक खोलना: target एट्रिब्यूट

सामान्यतः जब कोई उपयोगकर्ता लिंक पर क्लिक करता है, तो नया पेज उसी टैब में खुल जाता है जिससे पुराना पेज हट जाता है। इसे नियंत्रित करने के लिए target एट्रिब्यूट का उपयोग किया जाता है:

• target="_self": डिफ़ॉल्ट व्यवहार; उसी टैब या विंडो में पेज खोलता है।
• target="_blank": लिंक को ब्राउज़र के एक बिल्कुल नए टैब (New Tab) में खोलता है। बाहरी वेबसाइटों को जोड़ते समय इसका उपयोग सर्वोत्तम माना जाता है ताकि उपयोगकर्ता आपकी वेबसाइट से बाहर न जाए:

<a href="https://www.targetexams.com" target="_blank">टारगेट एग्जाम्स नए टैब में खोलें</a>

5. ब्राउज़र में हाइपरलिंक की दृश्य अवस्थाएं

वेब ब्राउज़र लिंक की स्थिति दर्शाने के लिए रंग परंपरा का पालन करते हैं:

• अदेखा लिंक (Unvisited Link): सामान्यतः नीले रंग में रेखांकित दिखाई देता है।
• देखा गया लिंक (Visited Link): बैंगनी (Purple) रंग में रेखांकित दिखता है, जो बताता है कि उपयोगकर्ता पहले इस लिंक पर जा चुका है।
• सक्रिय लिंक (Active Link): जिस मिलीसेकंड में माउस का बटन उस पर दबाया जाता है, वह लाल रंग में चमकता है।

1. कोडिंग अनुशासन: टैग्स के नेस्टिंग के नियम

HTML में कोड लिखते समय गणितीय नियमों की तरह नेस्टिंग के LIFO (Last In, First Out) नियम का सख्ती से पालन करना चाहिए। इसका अर्थ है कि जो टैग सबसे अंत में खोला गया है, उसे सबसे पहले बंद किया जाना चाहिए।

गलत नेस्टिंग (त्रुटिपूर्ण):

<p><b><i>बिहार बोर्ड परीक्षा</b></i></p>  <!-- नियम का उल्लंघन! -->

सही नेस्टिंग (शुद्ध):

<p><b><i>बिहार बोर्ड परीक्षा</i></b></p>  <!-- LIFO नियम का पूर्ण पालन -->

यहाँ ध्यान दें कि <i> सबसे बाद में खुला था इसलिए वह सबसे पहले बंद हुआ, फिर <b> और अंत में <p> बंद हुआ।

2. वेब फाइलों के नामकरण के स्वर्णिम नियम

इंटरनेट के वेब सर्वर लिनक्स (Linux) जैसे ऑपरेटिंग सिस्टम पर चलते हैं जो बड़े और छोटे अक्षरों में कड़ाई से भेद करते हैं। अतः विद्यार्थियों को फाइल सेव करते समय चार नियमों का पालन करना चाहिए:

1. फाइल नाम में कभी स्पेस (खाली जगह) न दें: mera school.html जैसा नाम न रखें। सर्वर खाली जगह को %20 में बदल देता है जिससे लिंक टूट जाते हैं। इसके स्थान पर हाइफन का प्रयोग करें: mera-school.html।
2. हमेशा छोटे अक्षरों (Lowercase) का उपयोग करें: फाइल का नाम हमेशा छोटे अक्षरों में रखें (जैसे contact.html)। सर्वर पर Page.html और page.html दो अलग-अलग फाइलें मानी जाती हैं।
3. होमपेज का मानक नाम: जब कोई उपयोगकर्ता किसी वेबसाइट का मुख्य पता खोलता है, तो सर्वर अपने आप index.html नाम की फाइल को खोजता है। अतः किसी भी वेबसाइट के मुख्य मुखपृष्ठ का नाम हमेशा index.html ही होना चाहिए।
4. सही एक्सटेंशन सुनिश्चित करें: नोटपैड से सेव करते समय 'Save as type' में 'All Files (*.*)' चुनें ताकि फाइल के अंत में गलती से .txt न जुड़े।

3. किसी भी वेबसाइट का कोड देखना: डेवलपर टूल्स

HTML की सबसे बड़ी खूबी यह है कि यह पूरी तरह पारदर्शी है। कोई भी विद्यार्थी किसी भी लाइव वेबसाइट की बनावट देख सकता है:

• पेज का कोड देखना (View Page Source): किसी भी वेब पेज पर राइट-क्लिक करें और "View Page Source" चुनें (शॉर्टकट: Ctrl + U)। ब्राउज़र एक नए टैब में उस पेज का पूरा HTML कोड दिखा देगा।
• एलिमेंट की जांच (Inspect Element): किसी विशिष्ट बटन या हेडिंग पर राइट-क्लिक करके "Inspect" चुनें (शॉर्टकट: F12)। इससे डेवलपर टूल्स खुल जाते हैं जहाँ कोड में तुरंत बदलाव करके लाइव असर देखा जा सकता है।

4. वेब सुरक्षा, आचार संहिता और डिजिटल नागरिकता

वेब सामग्री का निर्माण करते समय विद्यार्थियों को एक जिम्मेदार डिजिटल नागरिक की तरह आचरण करना चाहिए:

• कॉपीराइट का सम्मान: बिना अनुमति के किसी अन्य वेबसाइट का टेक्स्ट या कोड चोरी न करें।
• व्यक्तिगत गोपनीयता की रक्षा: सार्वजनिक वेब पेज पर कभी भी अपना घर का पता, निजी मोबाइल नंबर, पासवर्ड या बैंक खाता विवरण न लिखें।
• सुरक्षित हाइपरलिंकिंग: उपयोगकर्ताओं को कभी भी भ्रामक, असुरक्षित या अज्ञात संदिग्ध लिंक पर न भेजें।