← Back to HTML Course | Chapter 3: Page Structure | Lesson 10 of 12

HTML Computercode

सोचिए आप किसी friend को email लिखकर math formula समझा रहे हैं या उन्हें computer code की एक line दिखा रहे हैं। अगर आप इसे regular text के रूप में paste करते हैं, तो browser आपकी सारी spacing को दबा देगा, lines को आपस में मिला देगा, और यह एक regular sentence जैसा दिखने लगेगा। HTML computercode elements इस formatting समस्या को हल करते हैं। ये browser को technical terms, commands, और code blocks को एक साफ, अलग layout में isolate करने का निर्देश देते हैं। इन elements का उपयोग करके, आपके code snippets, keyboard shortcuts, और terminal logs बिल्कुल वैसे ही display होंगे जैसे आपने टाइप किए थे, एक साफ monospace font में formatted।
Syntax
markup
<code>Inline code</code>
<pre><code>Preformatted code</code></pre>
<kbd>Keyboard input</kbd>

code Tag

code tag inline code snippets या technical keywords दिखाने के लिए इस्तेमाल होता है। यह text को आस-पास के body paragraphs से अलग दिखाने के लिए एक monospace font (जैसे Courier) में style करता है।

Note: किसी sentence के अंदर छोटे programming terms, filenames, या properties को format करने के लिए code tag इस्तेमाल करें।
Warning: code tag एक inline element है, यानी यह line breaks को preserve नहीं करेगा; multi-line code blocks के लिए pre tag का उपयोग करें।

उदाहरण: The code Tag

markup
<p>Run the <code>npm install</code> command.</p>

Preformatted Code Blocks (pre और code)

किसी multi-line code block को उसके original line breaks, indentation, और spaces के साथ दिखाने के लिए, आप अपने code element को एक pre (preformatted) tag के अंदर wrap करते हैं।

pre tag के बिना, browser आपकी सारी सावधानीपूर्वक की गई indentation और line breaks को एक ही लाइन में collapse कर देगा।

Note: साफ, पढ़ने लायक code blocks बनाने के लिए अपने code tag को pre tag के अंदर nest करें।
Warning: सुनिश्चित करें कि आपके opening tags के ठीक बाद कोई blank lines या extra spaces न हों, क्योंकि browser उन्हें आपकी screen पर display कर देगा।

उदाहरण: Preformatted Code Blocks (pre and code)

markup
<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

Keyboard Inputs को Style करना (kbd)

kbd element user के keyboard inputs, जैसे command shortcuts या दबाई जाने वाली keys, को represent करने के लिए इस्तेमाल होता है।

Browsers kbd tags के अंदर के text को default रूप से एक monospace font में render करते हैं। इससे 'press Ctrl+S' जैसे instructions को सामान्य body text से visually अलग पहचानना आसान हो जाता है।

Note: अपने kbd tags को keyboard की physical keys जैसा दिखाने के लिए उन पर साधारण border-radius और background styles लगाएं।
Warning: अपने markup को साफ और पढ़ने योग्य रखने के लिए shortcut combination में हर key के लिए हमेशा अलग kbd tags लिखें।

उदाहरण: Styling Keyboard Inputs (kbd)

markup
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Terminal Output दिखाना (samp)

samp tag किसी computer system, terminal program, या चल रही script process से आए output data को represent करने के लिए इस्तेमाल होता है, और default रूप से text को monospace font में render करता है।

यह आमतौर पर उन tutorials में दिखता है जो कोड के ठीक नीचे उसके program का console output दिखाते हैं।

Note: users को किसी terminal process के expected outcome को दिखाने के लिए अपने guides में samp tag इस्तेमाल करें।
Warning: samp को code के साथ confuse न करें, क्योंकि samp लिखे गए code scripts के बजाय output logs को represent करता है।

उदाहरण: Displaying Terminal Output (samp)

markup
<p>The terminal displayed: <samp>Build successful</samp></p>

Code में Variables Define करना (var)

var tag mathematical formulas, code arguments, या technical equations में variables को represent करने के लिए इस्तेमाल होता है। Browser default रूप से text को italicized format में दिखाता है।

यह visual अंतर readers को तुरंत पहचानने में मदद करता है कि किसी example में कौन-से हिस्से placeholders हैं और कौन-से fixed syntax।

Note: अपने mathematical formula layouts को साफ और professional दिखाने के लिए उनके अंदर var tag इस्तेमाल करें।
Warning: var tag का उपयोग em जैसे standard italic styling tags के replacement के रूप में न करें, क्योंकि var का एक highly technical मतलब होता है।

उदाहरण: Defining Variables in Code (var)

markup
<p>The formula is <var>x</var> + <var>y</var> = 10</p>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.