HTML, pre, br, and code, पैराग्राफ से आगे. अपनी वेब पेज पर कोड और कविता ...

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

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

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

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

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

<code> टैग का उपयोग करके इनलाइन कोड स्निपेट को कैसे प्रदर्शित किया जाता है, इसका एक उदाहरण।

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

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

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

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

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

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

<br> टैग एक पैराग्राफ के भीतर लाइन ब्रेक बनाने का सबसे सीधा तरीका है, जैसे कविता की पंक्तियों के लिए।

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

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

लेकिन अधिक जटिल फ़ॉर्मेटिंग के बारे में क्या? एक और कविता में अनियमित रिक्ति और इंडेंटेशन हो सकता है जो इसकी कलात्मक आत्मा के लिए महत्वपूर्ण है। जबकि हम प्रत्येक लाइन ब्रेक के लिए <br> टैग का उपयोग कर सकते हैं, यह इंडेंटेशन या कई रिक्त स्थान को संरक्षित नहीं करेगा। फ़ॉर्मेटिंग सिर्फ सजावट नहीं है; यह अभिव्यक्ति का हिस्सा है। यहीं पर <pre> (प्रीफ़ॉर्मेटेड टेक्स्ट) तत्व चमकता है। जब हम टेक्स्ट को <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> "सब कुछ ठीक वैसे ही प्रदर्शित करो जैसा मैंने टाइप किया है" बटन है। इनका बुद्धिमानी से उपयोग करें, और आपके ट्यूटोरियल एक अच्छी तरह से टिप्पणी किए गए फ़ंक्शन जितने स्पष्ट होंगे।

और अधिक जानें The Transcendent पर

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

चरण	शीर्षक	विवरण
1	<code> टैग	इनलाइन कोड स्निपेट्स को सिमेंटिक रूप से चिह्नित करता है, जिससे यह आमतौर पर मोनोस्पेस फ़ॉन्ट में प्रस्तुत होता है।
2	HTML एंटिटीज़	< और > जैसे विशेष वर्णों को प्रदर्शित करने के लिए &lt; और &gt; का उपयोग करें, ताकि ब्राउज़र उन्हें टैग के रूप में व्याख्या न करे।
3	<br> टैग	एक ब्लॉक के भीतर एक स्पष्ट लाइन ब्रेक बनाता है (जैसे एक कविता), बिना एक नया पैराग्राफ शुरू किए। यह एक सेल्फ-क्लोजिंग टैग है।
4	<pre> टैग	प्रीफ़ॉर्मेटेड टेक्स्ट को संरक्षित करता है, जिसमें सभी रिक्त स्थान, इंडेंटेशन और लाइन ब्रेक शामिल होते हैं, ठीक वैसे ही जैसे वे लिखे गए थे।
5	<pre><code> कॉम्बो	बड़े कोड ब्लॉक प्रदर्शित करने का सबसे अच्छा तरीका। <pre> फ़ॉर्मेटिंग को बनाए रखता है, और <code> सिमेंटिक रूप से इंगित करता है कि सामग्री कोड है।

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

प्रश्न: क्या मैं <br> टैग के बजाय CSS का उपयोग कर सकता हूँ?

उत्तर: जबकि आप स्थान बनाने के लिए CSS मार्जिन और पैडिंग का उपयोग कर सकते हैं, <br> टेक्स्ट के एक ब्लॉक के भीतर एक लाइन ब्रेक के लिए सही सिमेंटिक विकल्प है, जैसे एक कविता या पता में। बड़े तत्वों को अलग करने के लिए, CSS को प्राथमिकता दी जाती है।

प्रश्न: क्या <pre> टैग SEO को प्रभावित करता है?

उत्तर: सीधे नहीं। सर्च इंजन <pre> टैग के भीतर टेक्स्ट को पढ़ सकते हैं। हालांकि, अपनी प्राथमिक सामग्री की बड़ी मात्रा को <pre> के अंदर रखने से बचें, क्योंकि इसे नियमित बॉडी टेक्स्ट की तुलना में कम महत्वपूर्ण माना जा सकता है।

प्रश्न: क्या इन टैग्स के आधुनिक विकल्प हैं?

उत्तर: टैग्स खुद ही मौलिक हैं और मानक बने हुए हैं। हालांकि, जटिल कोड सिंटैक्स हाइलाइटिंग (रंग जोड़ने) के लिए, आधुनिक डेवलपर्स अक्सर Prism.js या Highlight.js जैसी JavaScript लाइब्रेरीज़ का उपयोग करते हैं, जो <pre><code> नींव पर निर्मित होती हैं।

प्रश्न: क्या वर्टिकल स्पेस बनाने के लिए कई <br> टैग का उपयोग करना बुरा है?

उत्तर: हाँ। अनुभागों के बीच स्थान बनाने के लिए कई <br> टैग का उपयोग करना एक खराब अभ्यास माना जाता है। लेआउट और वर्टिकल स्पेसिंग को नियंत्रित करने के लिए, आपको हमेशा CSS का उपयोग करना चाहिए।