HTML कंप्यूटर कोड

ट्यूटोरियल और दस्तावेज़ अक्सर कमांड, प्रॉपर्टी नाम और HTML अंश दिखाते हैं। यदि आप वही पाठ सामान्य पैराग्राफ में चिपकाएँ, ब्राउज़र रिक्त स्थान समेट सकता है और < को असली टैग की शुरुआत मान सकता है। HTML कंप्यूटर पाठ के लिए तत्व देता है ताकि उदाहरण पढ़ने योग्य और सुरक्षित रहें। यह सत्र हर भूमिका के लिए सही तत्व चुनने में मदद करता है: वाक्य में छोटा टोकन, बहु-पंक्ति ब्लॉक, उपयोगकर्ता द्वारा दबाई गई कुंजी, या प्रोग्राम का नमूना आउटपुट। इन भूमिकाओं को अलग रखने से व्याख्या पृष्ठ पाठकों और सहायक तकनीकों के लिए स्पष्ट होते हैं, और वह आम गलती रुकती है जिसमें उदाहरण दस्तावेज़ में जीवित तत्व बन जाता है।

कंप्यूटर-कोड तत्व क्या हैं?

ये तत्व उस पाठ को चिह्नित करते हैं जो कोड, कुंजीपटल इनपुट या प्रोग्राम आउटपुट दर्शाता है — सामान्य गद्य नहीं। वे ब्राउज़र को उपयुक्त डिफ़ॉल्ट फ़ॉन्ट चुनने में मदद करते हैं (अक्सर code और pre के लिए monospace) और सहायक उपकरणों को बताते हैं कि यह अंश कंप्यूटर-संबंधी है। अक्षर आप ही लिखते हैं; टैग अर्थ जोड़ते हैं और pre के साथ लेआउट बचाते हैं। वे पृष्ठ के पीछे की लॉजिक नहीं बदलते; उनका काम अर्थ और प्रदर्शन का है। बिना ज़रूरत हर तकनीकी शब्द को code से चिह्नित करें तो पाठक भ्रमित हो सकता है; बिना pre बहु-पंक्ति कोड छोड़ें तो वह इंडेंट जो दिखाना चाहते थे गायब हो सकता है।

सीधा उत्तर

वाक्य में छोटे अंश के लिए code उपयोग करें। जब रिक्त स्थान और पंक्ति विराम रहना चाहिए तो pre उपयोग करें। ब्लॉक का आम पैटर्न <pre><code>...</code></pre> है। जब भूमिकाएँ असली हों तो कुंजियों को kbd और नमूना आउटपुट को samp से चिह्नित करें। जब उदाहरण स्वयं HTML हो, कच्चे < और > की जगह < और > लिखें ताकि ब्राउज़र गलती से जीवित तत्व न बनाए। यह सरल आदत ट्यूटोरियल पृष्ठों की रक्षा करती है: पाठक वे अक्षर देखता है जो आप दिखाना चाहते थे, उदाहरण के बीच गलती से बना पैराग्राफ नहीं।

एक नज़र में तत्व

इनलाइन कोड

जब आप वाक्य में छोटा टोकन बताएँ, उसे code में लपेटें। शब्द दृष्टि से अलग रहता है बिना पूरे ब्लॉक को बाध्य किए। यह पैटर्न प्रॉपर्टी नाम, छोटे कमांड और व्याख्या के बीच फ़ंक्शन नामों के लिए सही है। पैराग्राफ के हर तकनीकी शब्द को चिह्नित न करें; code उन टोकन के लिए रखें जिन्हें पाठक जल्दी ढूँढे।

नमूना पढ़ना

• वाक्य सामान्य पैराग्राफ पाठ है
• केवल प्रॉपर्टी नाम code के अंदर है
• पाठक तकनीकी टोकन जल्दी स्कैन कर सकता है
• यह बहु-पंक्ति सूची नहीं है — उसके लिए pre उपयोग करें
• डिफ़ॉल्ट फ़ॉन्ट अक्सर monospace है, पर अर्थ अकेले रूप से ज़्यादा मायने रखता है
• एक ही पैराग्राफ में कई code तत्व ठीक हैं यदि आप एक से अधिक टोकन बताएँ

pre और code वाले ब्लॉक

pre का अर्थ प्रीफ़ॉर्मैटेड: रिक्त स्थान और पंक्ति विराम लगभग जैसे टाइप किए वैसा रहते हैं। pre के अंदर code नेस्ट करना कोड ब्लॉक का स्पष्ट पैटर्न है। HTML उदाहरणों में कोण कोष्ठक encode करें। बिना pre के, HTML के सामान्य व्हाइटस्पेस नियम इंडेंट और पंक्तियों को एक घनी पंक्ति में समतल कर सकते हैं। दोनों का योग पाठकों और उपकरणों को साफ़ बताता है कि सामग्री संरक्षित लेआउट वाला कोड है।

encoding क्यों ज़रूरी है

यदि आप ट्यूटोरियल पृष्ठ में कच्चा <p> लिखें, ब्राउज़र अक्षर <p> दिखाने के बजाय असली पैराग्राफ बना सकता है। <p> के रूप में encode करने से उदाहरण सुरक्षित दिखता है। Entities सत्र वर्ण संदर्भों पर गहराई देता है; यहाँ HTML डेमो में कोण कोष्ठक की आदत भर चाहिए। एक बार कच्चा टैग चिपकाएँ, रीलोड करें, फिर encode करें — अंतर तुरंत दिखता है और केवल सिद्धांत से बेहतर याद रहता है। encoding आपके पृष्ठ के उदाहरण पाठ पर लागू होती है, उस HTML भाषा पर नहीं जो आप सीख रहे हैं।

कुंजीपटल इनपुट और नमूना आउटपुट

जब आप उन कुंजियों का वर्णन करें जिन्हें उपयोगकर्ता दबाता है तो kbd उपयोग करें। जब प्रोग्राम या कमांड का नमूना आउटपुट दिखाएँ तो samp उपयोग करें। ईमानदार रहें — केवल monospace रूप के लिए सामान्य शब्दों को kbd न बनाएँ। यदि पाठ CSS प्रॉपर्टी नाम है तो code बेहतर है; यदि शॉर्टकट कुंजी है तो kbd सही विकल्प है। यह अर्थगत अलगाव दस्तावेज़ स्पष्ट करता है और स्क्रीन रीडर को सामग्री का प्रकार समझने में मदद करता है।

संपादक में अभ्यास

1. ऐसा वाक्य लिखें जो font-size प्रॉपर्टी को code के अंदर बताए।
2. < और > से दो छोटी HTML पंक्तियों वाला pre+code ब्लॉक जोड़ें।
3. सेव शॉर्टकट के लिए kbd वाली एक सुझाव पंक्ति जोड़ें।
4. वैकल्पिक: नकली कमांड आउटपुट के लिए एक samp पंक्ति।
5. सेव करें और खोलें — पुष्टि करें कि pre के अंदर रिक्त स्थान रहें और encode किए टैग पाठ के रूप में दिखें।
6. अस्थायी रूप से बिना encoding के कच्चा <div> ब्लॉक में चिपकाएँ, रीलोड करें, समस्या देखें, फिर encode करें।
7. पैराग्राफ जाँचें: क्या हर kbd असली कुंजी है? क्या सामान्य गद्य pre के बाहर रहा?
   चरण क्रम से करें; छठा चरण कच्चे टैग का जोखिम ठोस बनाता है। यदि इंडेंट गायब हों, जाँचें कि ब्लॉक pre में है और टैग जल्दी बंद नहीं हुए। यदि उदाहरण के बीच नया अनुभाग या पैराग्राफ दिखे, आमतौर पर encoding छूटी है।

गलतियाँ जो उदाहरण तोड़ती हैं

• बहु-पंक्ति कोड केवल code में बिना pre — पंक्ति विराम और इंडेंट समेट सकते हैं
• बिना encoding कच्चा <div> या <p> चिपकाना — जीवित तत्व बन जाता है
• लंबे सामान्य गद्य लेखों के लिए pre (यह प्रीफ़ॉर्मैटेड कंप्यूटर पाठ के लिए है, निबंधों के लिए नहीं)
• हर तकनीकी शब्द को kbd जब वह कुंजीपटल इनपुट नहीं
• pre या code बंद करना भूलना ताकि आगे का पाठ प्रीफ़ॉर्मैटेड शैली में अटक जाए
• केवल monospace रूप पर भरोसा करना बिना अर्थ के अनुसार तत्व चुने
• उसी उदाहरण में कुछ कोष्ठक encode और कुछ कच्चे छोड़ना — आधा पाठ, आधे जीवित टैग

सारांश

• code छोटा इनलाइन कंप्यूटर पाठ चिह्नित करता है
• pre ब्लॉक के लिए रिक्त स्थान और पंक्ति विराम रखता है
• pre और code मिलाना आम बहु-पंक्ति पैटर्न है
• HTML उदाहरणों में < और > को < और > के रूप में encode करें
• kbd और samp कुंजीपटल इनपुट और नमूना आउटपुट तब कवर करते हैं जब भूमिकाएँ फिट हों
• तत्व पाठ के अर्थ से चुनें, केवल डिफ़ॉल्ट फ़ॉन्ट रूप से नहीं
• सेव के बाद जाँचें: क्या पाठक वे अक्षर देखता है जो आप दिखाना चाहते थे?
  इससे ट्यूटोरियल पृष्ठ स्पष्ट और सुरक्षित रहते हैं: वाक्य में छोटे टोकन, संरक्षित लेआउट वाले ब्लॉक, सही भूमिकाओं में कुंजियाँ और आउटपुट, और वह encoding जो उदाहरण को जीवित तत्वों में बदलने से रोकती है।