पैराग्राफ से आगे: अपनी वेब पेज पर कोड और कविता कैसे दिखाएँ, #10

पैराग्राफ से आगे: अपनी वेब पेज पर कोड और कविता कैसे दिखाएँ

सामग्री को ठीक वैसे ही प्रस्तुत करने के लिए <code>, <pre>, और <br> टैग्स में महारत हासिल करें जैसा आप चाहते हैं।

क्या आपने कभी वेब डेवलपमेंट के बारे में एक ब्लॉग पोस्ट लिखने या सिंटैक्स के एक टुकड़े को समझाने की कोशिश की है, लेकिन आपके वेबपेज ने आपकी सावधानीपूर्वक फ़ॉर्मेटिंग को पूरी तरह से अनदेखा कर दिया? आप स्पष्टता के लिए अपने कोड को इंडेंट करते हैं, लेकिन ब्राउज़र इसे एक साथ जोड़ देता है। आप एक खूबसूरत कविता पेस्ट करते हैं, और यह एक एकल, अस्त-व्यस्त पैराग्राफ में बदल जाती है।

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

यहीं पर तीन विशेष HTML तत्व हमारे बचाव में आते हैं: <code>, <br>, और <pre>। आइए देखें कि वे कैसे काम करते हैं।

कोड दिखाने की समस्या

कल्पना कीजिए कि हम एक ट्यूटोरियल लिख रहे हैं और हमें CSS कोड के एक स्निपेट को इनलाइन प्रदर्शित करने की आवश्यकता है, जैसे: p { color: red; }। यदि हम इसे अपने HTML में टाइप करते हैं, तो ब्राउज़र इसे सामान्य रूप से रेंडर करेगा। ब्राउज़र को अर्थपूर्ण ढंग से यह बताने के लिए कि "यह कोड का एक टुकड़ा है," हम इसे <code> टैग में लपेटते हैं।

<code> तत्व तुरंत टेक्स्ट की उपस्थिति को बदल देता है, आमतौर पर एक मोनोस्पेस फ़ॉन्ट में, इसे आसपास के टेक्स्ट सेT visually अलग करता है। फिर हम CSS के साथ इस स्टाइलिंग को कस्टमाइज़ कर सकते हैं। डिफ़ॉल्ट रूप से, <code> एक इनलाइन तत्व है, जिसका अर्थ है कि यह एक वाक्य के प्रवाह के भीतर बैठता है।

ग्रेटर-दैन और लेस-दैन की दुविधा

अब, क्या होगा यदि हम HTML टैग्स के बारे में लिखना चाहते हैं? उदाहरण के लिए, हम <h1> टैग को ही प्रदर्शित करना चाहते हैं। यदि हम "h1" शब्द को कोड टैग्स में लपेटने की कोशिश करते हैं, तो ब्राउज़र भ्रमित हो जाता है। यह <h1> को टेक्स्ट के रूप में नहीं देखता है; यह इसे एक वास्तविक HTML टैग के रूप में देखता है जिसे संसाधित किया जाना है और इसे सही ढंग से प्रदर्शित नहीं करेगा।

अक्षरों < और > को शाब्दिक रूप से प्रदर्शित करने के लिए, हमें HTML एंटिटीज़ का उपयोग करना होगा। ये विशेष कोड होते हैं जो आरक्षित अक्षरों का प्रतिनिधित्व करते हैं।

    &lt;  <  के रूप में रेंडर होगा
    &gt;  >  के रूप में रेंडर होगा
    

<h1> का उपयोग यह सुनिश्चित करता है कि ब्राउज़र इसे व्याख्या करने की कोशिश करने के बजाय पेज पर <h1> प्रदर्शित करता है। जबकि कई HTML एंटिटीज़ हैं, ये दो HTML सिंटैक्स को स्पष्ट रूप से प्रदर्शित करने के लिए अनिवार्य हैं।

<br> के साथ लाइन ब्रेक जोड़ना

कभी-कभी, हमें लाइन ब्रेक पर अधिक नियंत्रण की आवश्यकता होती है। एक <p> टैग में लिपटी एक छोटी कविता पर विचार करें। कविता में दो लाइनें हैं, लेकिन ब्राउज़र उनके बीच के लाइन ब्रेक को अनदेखा करता है, इसे एक सतत पैराग्राफ के रूप में प्रदर्शित करता है।

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

<br> टैग एक साधारण, सेल्फ-क्लोजिंग टैग है — यह किसी भी सामग्री को नहीं लपेटता है और केवल ब्राउज़र को अगली लाइन पर जाने का निर्देश देने के लिए मौजूद होता है।

<pre> के साथ प्रीफ़ॉर्मेटेड टेक्स्ट को संरक्षित करना

लेकिन अधिक जटिल फ़ॉर्मेटिंग के बारे में क्या? एक और कविता में अनियमित रिक्ति और इंडेंटेशन हो सकता है जो इसकी कलात्मक आत्मा के लिए महत्वपूर्ण है। जबकि हम प्रत्येक लाइन ब्रेक के लिए <br> टैग का उपयोग कर सकते हैं, यह इंडेंटेशन या कई रिक्त स्थान को संरक्षित नहीं करेगा।

फ़ॉर्मेटिंग सिर्फ सजावट नहीं है; यह अभिव्यक्ति का हिस्सा है। यहीं पर <pre> (प्रीफ़ॉर्मेटेड टेक्स्ट) तत्व चमकता है। जब हम टेक्स्ट को <pre> टैग्स में लपेटते हैं, तो ब्राउज़र इसकी सभी चीज़ों का सम्मान करता है: रिक्त स्थान, लाइन ब्रेक, और पूरी संरचना।

हम एक <pre> ब्लॉक के भीतर किसी भी वर्ण को कहीं भी रख सकते हैं, और वह ठीक वहीं रहेगा। यह <pre> को कोड ब्लॉक, ASCII कला, या कविता के लिए एकदम सही बनाता है जहाँ दृश्य संरचना सर्वोपरि है।

शक्तिशाली संयोजन: <pre> और <code>

कोड के ब्लॉक प्रदर्शित करने के लिए, सर्वोत्तम परिणामों के लिए <pre> और <code> का अक्सर एक साथ उपयोग किया जाता है। हम एक <code> तत्व को एक <pre> तत्व के अंदर नेस्ट कर सकते हैं।

    <pre><code>
        function greet(name) {
            console.log("Hello, " + name + "!");
        }
        greet("World");
    </code></pre>
    

यह संयोजन ब्राउज़र को दो बातें बताता है:

1. <pre>: "इस टेक्स्ट को ठीक वैसे ही प्रदर्शित करें जैसा यह लिखा गया है, इसके सभी फ़ॉर्मेटिंग के साथ।"
2. <code>: "यह सामग्री कोड का एक टुकड़ा है।"

यह एक-दो पंच हमें पूरी तरह से इंडेंटेड, सिमेंटिकली सही कोड स्निपेट देता है जो मानव-पठनीय और मशीन-समझने योग्य दोनों हैं। आधुनिक वेब डेवलपमेंट में, आप अक्सर Transcendent जैसे प्लेटफॉर्म पर Prism.js या Highlight.js जैसी JavaScript लाइब्रेरीज़ का उपयोग करके सिंटैक्स हाइलाइटिंग (रंग जोड़ना) देखेंगे। ये लाइब्रेरीज़ इन मूल टैग्स की नींव पर ही निर्मित होती हैं, जिससे कोड को और भी आकर्षक बनाया जाता है।

निष्कर्ष

<code>, <br>, और <pre> तत्व वेब पर संरचित सामग्री प्रस्तुत करने के लिए आपके आवश्यक उपकरण हैं। वे आपको, डेवलपर को, यह सुनिश्चित करने के लिए आवश्यक सटीकता देते हैं कि आपके कोड उदाहरण स्पष्ट हों और आपकी रचनात्मक फ़ॉर्मेटिंग बरकरार रहे। याद रखें: जबकि ब्राउज़र डिफ़ॉल्ट रूप से चीजों को साफ करना पसंद करता है, कभी-कभी आपको दृढ़ता से कहना पड़ता है, "नहीं, इसे ठीक ऐसे ही प्रदर्शित करें।"

मुख्य बात:

इन टैग्स को अपने फ़ॉर्मेटिंग ओवरराइड बटन के रूप में सोचें। <br> "लाइन ब्रेक" बटन है, <code> "यह कोड है, इसे गड़बड़ मत करो" बटन है, और <pre> "सब कुछ ठीक वैसे ही प्रदर्शित करो जैसा मैंने टाइप किया है" बटन है। इनका बुद्धिमानी से उपयोग करें, और आपके ट्यूटोरियल एक अच्छी तरह से टिप्पणी किए गए फ़ंक्शन जितने स्पष्ट होंगे।

सारांश तालिका: HTML टेक्स्ट फ़ॉर्मेटिंग टैग्स

अक्सर पूछे जाने वाले प्रश्न (FAQ)