HTML Computercode

कभी-कभी हमें किसी वेबसाइट या ट्यूटोरियल में कोड (code) दिखाना होता है — जैसे HTML, CSS, JavaScript, या कोई भी command। ऐसे में HTML हमें कुछ खास tags देता है जिनसे हम कोड को सही ढंग से दिखा सकते हैं।

HTML में Computer Code दिखाने वाले Tags

टैग (Tag)	उपयोग (Use)
`<code>`	कोड दिखाने के लिए
`<pre>`	Preformatted text (जैसा लिखा है वैसा ही दिखाने के लिए)
`<kbd>`	Keyboard input दिखाने के लिए
`<samp>`	Program output दिखाने के लिए
`<var>`	Variables दिखाने के लिए

`टैग – कोड दिखाने के लिए`

इसका इस्तेमाल किसी programming code को दिखाने में किया जाता है। यह text को monospace font में दिखाता है। Example:

<p>HTML code example:</p>
<code>&lt;h1&gt;Hello World&lt;/h1&gt;</code>

Output: HTML code example: <h1>Hello World</h1> <code> टैग के अंदर जो भी लिखा जाता है, वह as plain text दिखता है — browser उसे execute नहीं करता।

pre> टैग – Preformatted Text

pre> का मतलब है “Preformatted” यानी text वैसा ही दिखे जैसा आपने लिखा है — spacing, line breaks और indentation के साथ। Example:

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

Output:

function greet() {
  console.log("Hello World!");
}
greet();

<pre> टैग के अंदर का text monospace font में होता है और formatting maintain रहती है।

<pre> + <code> का कॉम्बिनेशन

आमतौर पर developers दोनों को साथ में इस्तेमाल करते हैं ताकि कोड readable भी रहे और formatting भी बनी रहे। Example:

<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
</code></pre>

इस तरह आप अपने web tutorials या documentation में साफ़-सुथरा code दिखा सकते हैं।

<kbd> टैग – Keyboard Input

<kbd> टैग का इस्तेमाल यूज़र द्वारा दबाए गए keyboard keys दिखाने के लिए किया जाता है। Example:

<p>कॉपी करने के लिए <kbd>Ctrl</kbd> + <kbd>C</kbd> दबाएँ।</p>

Output: कॉपी करने के लिए <kbd>Ctrl</kbd> + <kbd>C</kbd> दबाएँ। यह tutorial या help pages में बहुत उपयोगी होता है।

<samp> टैग – Program Output दिखाने के लिए

इसका प्रयोग किसी program या command output को दिखाने में होता है। Example:

<p>Program Output:</p>
<samp>Hello User, your code has been executed successfully!</samp>

Output: Hello User, your code has been executed successfully!

<var> टैग – Variables दिखाने के लिए

<var> टैग का प्रयोग किसी variable name को दर्शाने के लिए किया जाता है। Example:

<p>Area of circle = <var>π</var> × <var>r</var><sup>2</sup></p>

Output: Area of circle = π × r² <var> टैग आमतौर पर italic font में दिखता है।

सभी Code Tags को साथ में Example

<h2>HTML Computer Code Example</h2>

<p>Type the following code:</p>
<pre><code>
let name = prompt("Enter your name:");
alert("Hello " + name);
</code></pre>

<p>To run the code, press <kbd>Ctrl</kbd> + <kbd>Enter</kbd>.</p>

<p>Output:</p>
<samp>Hello Jaswant</samp>

<p>In this program, <var>name</var> stores the user input.</p>

Output:

<pre><code> में JavaScript कोड properly formatted दिखेगा
<kbd> की मदद से keypress दिखेगा
<samp> से output दिखेगा
<var> से variable highlight होगा

Extra Styling – Code Blocks को सुंदर बनाना

आप CSS से code blocks को और सुंदर बना सकते हैं:

<style>
pre {
  background: #282c34;
  color: #61dafb;
  padding: 15px;
  border-radius: 10px;
  overflow-x: auto;
}
code {
  font-family: 'Courier New', monospace;
}
kbd {
  background: #333;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: monospace;
}
samp {
  background: #f4f4f4;
  padding: 5px;
  border-radius: 4px;
}
</style>

Output: अब आपका कोड syntax-style look में दिखेगा (जैसे VS Code या GitHub में)।

Summary

टैग	काम
`<code>`	कोड दिखाने के लिए
`<pre>`	Formatting और spacing के साथ text दिखाने के लिए
`<kbd>`	Keyboard input दिखाने के लिए
`<samp>`	Program output दिखाने के लिए
`<var>`	Variable name दिखाने के लिए

Practice Task

एक webpage बनाए जिसमें —
JavaScript का एक कोड block <pre><code> में हो
Keyboard shortcut <kbd> से दिखाएँ
Output <samp> से दिखाएँ
और formula <var> टैग के साथ दिखाएँ