HTML के पहले कदम - पाठ 2 - टैग p, div और उनका अंतर। टैग br

11/10/2025, by Ivan

पिछले पाठ में हमने अपना पहला HTML दस्तावेज़ बनाया था, यानी अब आप जानते हैं कि HTML कोड टेक्स्ट एडिटर में लिखा जाता है, और सभी बदलावों को ब्राउज़र में पेज रीफ्रेश (आमतौर पर F5 बटन से) करके देखा जाता है।

इस पाठ में हम टेक्स्ट के साथ काम जारी रखेंगे और टेक्स्ट को लपेटने के लिए span, p, div टैग्स का उपयोग करेंगे। साथ ही हम br टैग को भी समझेंगे।

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
     
  </body>
</html>

यह वह कोड है जिसके साथ हम आगे काम करेंगे।

चलिए कुछ पंक्तियाँ जोड़ते हैं:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <p>पहली पंक्ति P टैग में</p>
    <p>दूसरी पंक्ति P टैग में</p>
    <div>पहली पंक्ति DIV टैग में</div>
    <div>दूसरी पंक्ति DIV टैग में</div>
  </body>
</html>

अगर आप दस्तावेज़ को ब्राउज़र में खोलेंगे तो देखेंगे कि P टैग के टेक्स्ट अलग-अलग पंक्तियों में दिखाई देते हैं, लेकिन एक अंतर है — ब्राउज़र ने P टैग के लिए डिफ़ॉल्ट रूप से ऊपर और नीचे मार्जिन (अंतराल) जोड़ दिया है, जबकि DIV टैग के लिए ऐसा नहीं है और उसकी पंक्तियाँ एक-दूसरे से चिपकी हुई लगेंगी। ऐसा इसलिए है क्योंकि P टैग पैराग्राफ (पैराग्राफ़) के लिए होता है, जबकि DIV टैग एक ब्लॉक या क्षेत्र (area) को दर्शाता है। यानी यदि हमें किसी टेक्स्ट पैराग्राफ़ को दिखाना है तो हम P टैग का उपयोग करेंगे, और अगर हमें किसी क्षेत्र को अलग दिखाना है (जैसे रंग की पृष्ठभूमि या बॉर्डर जोड़ने के लिए) तो हम DIV टैग का उपयोग करेंगे।

अगर वेबसाइट में कोई टेक्स्ट है, तो वह हमेशा <p> या <h1>-<h6> टैग्स के अंदर होना चाहिए (जब तक कि वह टेक्स्ट केवल सजावट के लिए न हो)। इस प्रकार सही HTML संरचना इस तरह दिखेगी:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <div>
      <p>पहली पंक्ति P टैग में</p>
      <p>दूसरी पंक्ति P टैग में</p>
    </div>
  </body>
</html>

इस प्रकार हमारी संरचना है body>div>p। ध्यान रखें — P टैग के अंदर DIV टैग नहीं होना चाहिए, यानी body>p>div गलत है।

अब देखते हैं कि टेक्स्ट को नई पंक्ति में कैसे ले जाया जाए। यदि हमारा पैराग्राफ बहुत बड़ा है, तो हमारे पास दो विकल्प हैं — या तो टेक्स्ट को कई पैराग्राफ़ों में बाँट दें, या फिर लाइन ब्रेक टैग <br /> का उपयोग करें। यह एकल टैग होता है, इसलिए इसमें बंद करने वाला टैग नहीं होता, बल्कि हम स्लैश (/) लगाकर उसे स्वयं बंद करते हैं।

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <div>
      <p>HTML भाषा का विकास ब्रिटिश वैज्ञानिक टिम बर्नर्स-ली ने लगभग 1989—1991 में जिनेवा (स्विट्ज़रलैंड) में यूरोपीय परमाणु अनुसंधान संगठन (CERN) में किया था। HTML को वैज्ञानिक और तकनीकी दस्तावेज़ों के आदान-प्रदान के लिए एक भाषा के रूप में बनाया गया था, ताकि इसे उन लोगों द्वारा भी उपयोग किया जा सके जो लेआउट विशेषज्ञ नहीं थे। HTML ने SGML की जटिलता को सरल बनाने के लिए सीमित संरचनात्मक और अर्थपूर्ण तत्वों (डिस्क्रिप्टर्स या “टैग्स”) को परिभाषित किया। HTML की मदद से एक सरल लेकिन सुंदर दस्तावेज़ बनाया जा सकता है। इसके अलावा, HTML ने हाइपरटेक्स्ट का समर्थन जोड़ा और बाद में मल्टीमीडिया क्षमताएँ भी शामिल की गईं। मूल रूप से, HTML को इस तरह बनाया गया था कि दस्तावेज़ों की संरचना और फॉर्मेटिंग उनके प्रदर्शन उपकरणों से स्वतंत्र हो। आदर्श रूप में, HTML मार्कअप वाला टेक्स्ट विभिन्न उपकरणों (रंगीन स्क्रीन, मोनोक्रोम डिस्प्ले, मोबाइल फोन, या आवाज़ पढ़ने वाले सॉफ्टवेयर) पर बिना किसी विकृति के प्रदर्शित होना चाहिए। लेकिन आज HTML का उपयोग उसकी मूल धारणा से काफी दूर चला गया है। उदाहरण के लिए, <TABLE> टैग जो सामान्य तालिकाएँ बनाने के लिए था, अब पृष्ठों के लेआउट के लिए उपयोग होता है। समय के साथ, HTML की प्लेटफ़ॉर्म-स्वतंत्रता की मूल अवधारणा आधुनिक मल्टीमीडिया और ग्राफ़िकल आवश्यकताओं की बलि चढ़ गई।</p>
    </div>
  </body>
</html>

यह पैराग्राफ़ बहुत लंबा हो गया है। यदि हम टेक्स्ट को एडिटर में कई पंक्तियों में बाँट दें, तो HTML में इसका कोई प्रभाव नहीं होगा:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <div>
      <p>HTML भाषा का विकास ब्रिटिश वैज्ञानिक टिम बर्नर्स-ली ने लगभग 1989—1991 में जिनेवा (स्विट्ज़रलैंड) में यूरोपीय परमाणु अनुसंधान संगठन (CERN) में किया था।
      HTML को वैज्ञानिक और तकनीकी दस्तावेज़ों के आदान-प्रदान के लिए बनाया गया था, ताकि इसे लेआउट विशेषज्ञों के बिना भी उपयोग किया जा सके।
      HTML ने SGML की जटिलता को सरल बनाने के लिए सीमित संरचनात्मक और अर्थपूर्ण तत्वों को परिभाषित किया।
      HTML की मदद से सरल और सुंदर दस्तावेज़ बनाए जा सकते हैं। साथ ही, HTML ने हाइपरटेक्स्ट और बाद में मल्टीमीडिया क्षमताओं का समर्थन जोड़ा।
      मूल रूप से HTML को उपकरण-स्वतंत्र फॉर्मेटिंग के लिए बनाया गया था, लेकिन समय के साथ इसका उपयोग अधिक सजावटी बन गया।</p>
    </div>
  </body>
</html>

ब्राउज़र में इसका कोई फर्क नहीं पड़ेगा, इसलिए हमें मदद के लिए <br /> टैग का उपयोग करना होगा। चलिए इसे प्रत्येक वाक्य के अंत में जोड़ते हैं:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <div>
      <p>HTML भाषा का विकास ब्रिटिश वैज्ञानिक टिम बर्नर्स-ली ने लगभग 1989—1991 में जिनेवा में किया था।<br />
      HTML को वैज्ञानिक दस्तावेज़ों के आदान-प्रदान के लिए बनाया गया था।<br />
      HTML ने SGML की जटिलता को सरल बनाया।<br />
      HTML की मदद से सरल और सुंदर दस्तावेज़ बनाए जा सकते हैं।<br />
      HTML में हाइपरटेक्स्ट का समर्थन शामिल है।<br />
      बाद में मल्टीमीडिया क्षमताएँ जोड़ी गईं।<br />
      मूल रूप से HTML को संरचना और फॉर्मेटिंग के लिए बनाया गया था।<br />
      समय के साथ इसका उपयोग मल्टीमीडिया और ग्राफिक डिज़ाइन की जरूरतों के लिए विकसित हुआ।</p>
    </div>
  </body>
</html>

अब ब्राउज़र समझ जाएगा कि टेक्स्ट को नई पंक्ति में ले जाना है — यह काम <br /> टैग करता है।

हम चाहें तो टेक्स्ट को कई पैराग्राफ़ों में भी बाँट सकते हैं, इसके लिए <p> टैग का उपयोग करें:

<html>
  <head>
    <title>मेरा पहला HTML-दस्तावेज़</title>
  </head>
  <body>   
    <h1>मेरा पहला HTML-दस्तावेज़</h1>
    <div>
      <p>HTML भाषा का विकास ब्रिटिश वैज्ञानिक टिम बर्नर्स-ली ने लगभग 1989—1991 में किया था।<br />
      HTML को वैज्ञानिक दस्तावेज़ों के आदान-प्रदान के लिए बनाया गया था।<br />
      HTML ने SGML की जटिलता को सरल बनाया।<br />
      HTML की मदद से सरल और सुंदर दस्तावेज़ बनाए जा सकते हैं।<br />
      HTML में हाइपरटेक्स्ट का समर्थन शामिल है।<br />
      बाद में मल्टीमीडिया क्षमताएँ जोड़ी गईं।</p>
      <p>मूल रूप से HTML को उपकरण-स्वतंत्र संरचना के लिए बनाया गया था।<br />
      आधुनिक समय में HTML का उपयोग उसके मूल उद्देश्य से अलग है।<br />
      अब यह मुख्य रूप से वेबपेज़ डिज़ाइन और मल्टीमीडिया प्रदर्शन के लिए प्रयोग किया जाता है।</p>
    </div>
  </body>
</html>

ब्राउज़र पेज को रीफ्रेश करें, और आप देखेंगे कि अब टेक्स्ट दो पैराग्राफ़ों में विभाजित हो गया है।

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव

HTML के पहले कदम - पाठ 2 - टैग p, div और उनका अंतर। टैग br