• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Computercode

← Previous Next →

HTML provides several tags to display computer-related content such as code snippets, keyboard input, and program output. These tags help preserve formatting and convey technical meaning clearly.

🔹 Common Computercode Tags in HTML

Tag Purpose
<code> Displays code in a monospace font
<kbd> Indicates keyboard input
<samp> Represents sample output from a program
<var> Displays a variable in programming context
<pre> Preserves formatting and whitespace
✅ <code> – Code Snippet

Displays code in monospace font (does not preserve whitespace).

<p>This is <code>console.log("Hello")</code> in JavaScript.</p>
✅ <pre> – Preformatted Text

Preserves spaces, line breaks, and tabs as they appear.

<pre>
function hello() {
  console.log("Hello World");
}
</pre>
✅ <kbd> – Keyboard Input

Represents input from the user via keyboard.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
✅ <samp> – Sample Output

Used to show the output of a program or command.

<p>Output: <samp>Hello, user!</samp></p>
✅ <var> – Variable

Represents a variable in code, usually styled in italic by default.

<p>The value of <var>x</var> is 10.</p>

🧾 Example: All Computercode Tags Together

<pre>
<code>
let x = 10;
let y = 20;
console.log(x + y);
</code>
</pre>

<p>Type <kbd>Alt</kbd> + <kbd>F4</kbd> to close the window.</p>

<p>Sample Output: <samp>30</samp></p>

<p>Here, <var>sum</var> stores the result.</p>

Practice Questions

Q1. Write a JavaScript function using <pre> and <code> tags.

Q2. Use <kbd> to show keyboard shortcuts for copying text.

Q3. Display a sample output using the <samp> tag.

Q4. Highlight the variable total using the <var> tag.

Q5. Show a command-line snippet using <code> inside <pre>.

Q6. Create a layout showing input (with <kbd>) and output (with <samp>).

Q7. Nest <code> inside <pre> for correct formatting.

Q8. Use <kbd> to show a shortcut to refresh a page.

Q9. Display a Python print() statement using <code>.

Q10. Highlight multiple variables in a paragraph using <var>.

HTML Computercode Quiz

Q1: Which tag is used to display code snippets?

A. <pre>
B. <kbd>
C. <code>
D. <script>

Q2: What does the <pre> tag do?

A. Highlights keywords
B. Makes text bold
C. Preserves whitespace and line breaks
D. Runs JavaScript code

Q3: Which tag is used to show keyboard input?

A. <input>
B. <key>
C. <kbd>
D. <press>

Q4: Which tag is used for program output?

A. <out>
B. <samp>
C. <print>
D. <code>

Q5: What is the purpose of the <var> tag?

A. Bold text
B. Show a variable name
C. Input field
D. Italic title

Q6: Which of the following tags renders in a monospace font?

A. <p>
B. <code>
C. <span>
D. <b>

Q7: Can <kbd> and <samp> be used together?

A. No
B. Only in forms
C. Yes, for input/output examples
D. Only in tables

Q8: What is the default style for <var> in browsers?

A. Bold
B. Underline
C. Italic
D. Monospace

Q9: Which tag pair is best for displaying formatted code with line breaks?

A. <pre><code>
B. <kbd><code>
C. <var><kbd>
D. <div><samp>

Q10: Which tag is not a computercode tag?

A. <var>
B. <samp>
C. <kbd>
D. <script>
← Previous Next →
Login
Go Back Top