Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML में नई लाइन: `
` और `
` टैग का उपयोग
                

आप HTML पेज में `
` या `

` टैग का उपयोग करके नई लाइन जोड़ सकते हैं। `
` टैग पेज में एक ब्रेक जोड़ता है। `
` टैग टेक्स्ट को ठीक वैसे ही फॉर्मेट करता जैसा यह आपके कोड में दिखाई देता है। यदि `
` टैग के भीतर कोई नई लाइन हैं, तो वे अंतिम पेज पर दिखाई देंगी।

क्या आप कभी अपने वेब पेज पर एक नई लाइन जोड़ना चाहते थे? आप केवल एंटर कैरेक्टर का उपयोग करके नई लाइन नहीं जोड़ सकते। इसके बजाय, आपको HTML में बने टैग में से एक का उपयोग करने की आवश्यकता है जो नई लाइन बनाने के उद्देश्य के लिए बने हैं।

इस ट्यूटोरियल में, हम HTML `
` और `

` टैग पर चर्चा करने जा रहे हैं। दोनों टैग आपको अपने HTML टेक्स्ट में नई लाइन जोड़ने देते हैं। बिना देर किए, शुरू करते हैं।

HTML नई लाइन: `
` और `
`

कभी-कभी जब हम HTML लिख रहे होते हैं, तो हमें UI में लाइन ब्रेक या व्हाइट स्पेस जोड़ने की आवश्यकता होती है। ये स्पेस वेब पेज को अधिक पठनीय बनाएंगे। HTML में नई लाइन जोड़ने के दो तरीके हैं:

  • `
    ` टैग: एक लाइन ब्रेक बनाता है।
  • `
    ` टैग: टेक्स्ट को ठीक वैसे ही फॉर्मेट करता है जैसा यह आपके एडिटर में लिखा गया है।

HTML `
` टैग

हम `
` टैग का उपयोग करके अपने टेक्स्ट में एक नई लाइन जोड़ सकते हैं। यह टैग, जिसे ब्रेक रिटर्न एलिमेंट के रूप में जाना जाता है, पिछले एलिमेंट के बाद एक नई लाइन डालता है।

इस टैग का सिंटैक्स है:

<p> Test<br> </p>

`
` टैग "Test" शब्द के बाद एक नई लाइन जोड़ता है। इस टैग का क्लोजिंग टैग नहीं होता, इसके बजाय, आपको केवल `
` किसी भी स्थान पर जोड़ना होगा जहां आप एक नई लाइन चाहते हैं। आइए एक अधिक विस्तृत उदाहरण देखें:

यहाँ इसका उपयोग पते में प्रत्येक लाइन के बाद किया गया है:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line Breaks</title> </head> <body> <div> <p>Lorem ipsum dolor sit amet...</p> <address> <span>123 Main St</span><br> <span>Hometown, USA</span><br> <span>23455-2345</span> </address> <p>Lorem ipsum dolor sit amet...</p> </div> </body> </html>

इस कोड में, हम `

` टैग में प्रत्येक HTML `` टैग के बाद `
` टैग का उपयोग करते हैं। यह पते के प्रत्येक भाग में एक नई लाइन जोड़ता है।

HTML `
` टैग

HTML `

` टैग आपके कोड में प्रीफॉर्मेटेड टेक्स्ट एम्बेड करता है। यह टैग टेक्स्ट को ठीक वैसे ही डालता है जैसा हम इसे मार्कअप में इनपुट करते हैं। तो, टेक्स्ट में कोई भी लाइन ब्रेक अंतिम कोड में दिखाई देंगे।

`
` टैग के विपरीत, `

` एलिमेंट में ओपनिंग और क्लोजिंग टैग होता है। HTML कोड में `
` टैग का सिंटैक्स यहाँ है:

<pre> This is a sentence. </pre>

यह कोड "This is a sentence" टेक्स्ट को ठीक वैसे ही फॉर्मेट करता है जैसा यह `

` टैग के बीच दिखाई देता है।

`

` टैग की विशेषता यह है कि सब कुछ बिल्कुल वैसा ही दर्ज किया जाता है जैसा आप इसे एडिटर में लिखते हैं।

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

आइए `

` टैग के अधिक विस्तृत उदाहरण पर एक नज़र डालते हैं:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line Breaks</title> </head> <body style="max-width: 800px; width: 100%;"> <pre style="width: 100%;"> <p style="width: 800px;"> Lorem ipsum... </p> <address> 2345 Main St. Hometown, Anywhere, USA 12345-3456 </address> <p style="width: 800px; height: 500px; background: pink;"> Lorem ipsum... </p> </pre> </body> </html>

हम अपने कोड में `` टैग के तुरंत बाद `

` टैग जोड़ते हैं। टैग के भीतर सभी टेक्स्ट — हमारे HTML पैराग्राफ टैग और `
` टैग — टेक्स्ट एडिटर में जैसे दिखाई देते हैं वैसे ही फॉर्मेट होते हैं।

हमें पते में `
` टैग का उपयोग करने की आवश्यकता नहीं है। ऐसा इसलिए है क्योंकि हमने अपने टेक्स्ट एडिटर में एंटर कुंजी का उपयोग करके नई लाइन डाली हैं।

आमतौर पर, यह हमें अपने दस्तावेज़ में नई लाइन जोड़ने नहीं देगा। क्योंकि हमने `

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

निष्कर्ष

HTML में लाइन ब्रेक डालने के दो तरीके हैं: `
` और `

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

क्या आप HTML में कोडिंग के बारे में अधिक जानना चाहते हैं? हमारे पास HTML सीखने का एक गाइड है जो शीर्ष पाठ्यक्रमों और संसाधनों को सूचीबद्ध करता है जिनका उपयोग आप अपने ज्ञान को आगे बढ़ाने के लिए कर सकते हैं।

  1. HTML <dl> टैग: विवरण सूची परिभाषित करना HTML <dl> टैग: विवरण सूची परिभाषित करना

    HTML <dl> टैग <dl> एलिमेंट (डिस्क्रिप्शन लिस्ट / विवरण सूची) शब्द-परिभाषा जोड़े (term-description pairs) का एक समूह दर्शाता है। HTML5 में यह विवरण सूची है, HTML4 में परिभाषा सूची (definition list) कहलाता था। संबंधित टैग्स <dt> (डेफिनिशन टर्म) - शब्द/नाम <dd> (डेफिनिशन ड

  1. HTML <embed> टैग: बाहरी एप्लिकेशन एम्बेड करना HTML <embed> टैग: बाहरी एप्लिकेशन एम्बेड करना

    HTML <embed> टैग <embed> टैग HTML दस्तावेज़ में बाहरी एप्लिकेशन या इंटरैक्टिव कंटेंट (प्लगइन कंटेंट) एम्बेड करता है। यह एक खाली एलिमेंट (void element) है - कोई क्लोजिंग टैग नहीं। एट्रिब्यूट्स एट्रिब्यूट विवरण heightएम्बेडेड कंटेंट की ऊँचाई (पिक्सेल्स)

  1. HTML <dfn> टैग: परिभाषा उदाहरण परिभाषित करना HTML <dfn> टैग: परिभाषा उदाहरण परिभाषित करना

    HTML <dfn> टैग <dfn> टैग (डेफिनिशन इंस्टेंस) HTML में किसी शब्द के परिभाषा उदाहरण (defining instance) को दर्शाता है - यानी वह स्थान जहां किसी शब्द को पहली बार परिभाषित या समझाया गया है। उदाहरण: MCA परिभाषित करना <!DOCTYPE html> <html> <body> <h2>MCA में विषय<