HTML Code Elements – Solved Practice Questions

By /

Introduction

HTML provides special elements to display code, keyboard input, program output, variables, and preformatted text. These elements make technical content easier to read and are commonly used in programming tutorials, documentation, and developer websites. In this chapter, you’ll practice the most commonly used HTML code elements with solved examples.

Question 1

Problem Statement

Display a line of code using the <code> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Code Element</title>
</head>
<body>

    <h1>HTML Code</h1>

    <p>
        <code>console.log("Hello World");</code>
    </p>

</body>
</html>

Output

HTML Code

console.log("Hello World");

Step-by-Step Explanation

  • <code> displays programming code.
  • Browsers usually show code in a monospace font.
  • It is suitable for short code snippets.

Question 2

Problem Statement

Display keyboard input using the <kbd> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Keyboard Input</title>
</head>
<body>

    <h1>Keyboard Shortcut</h1>

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

</body>
</html>

Output

Keyboard Shortcut

Press Ctrl + S to save the file.

Step-by-Step Explanation

  • <kbd> represents keyboard input.
  • It is commonly used for shortcut keys.
  • Browsers display it using a monospace font.

Question 3

Problem Statement

Display computer output using the <samp> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Sample Output</title>
</head>
<body>

    <h1>Program Output</h1>

    <p>
        <samp>Hello, World!</samp>
    </p>

</body>
</html>

Output

Program Output

Hello, World!

Step-by-Step Explanation

  • <samp> represents program output.
  • It is useful for showing console or terminal results.
  • Browsers display it in a monospace font.

Question 4

Problem Statement

Display a variable using the <var> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Variable Element</title>
</head>
<body>

    <h1>Math Formula</h1>

    <p>
        Area = <var>length</var> × <var>width</var>
    </p>

</body>
</html>

Output

Math Formula

Area = length × width

Step-by-Step Explanation

  • <var> represents a variable.
  • It is commonly used in formulas and programming examples.
  • Browsers often display variables in italic text.

Question 5

Problem Statement

Display preformatted text using the <pre> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Preformatted Text</title>
</head>
<body>

    <h1>Address</h1>

    <pre>
John Smith
25 Park Road
New Delhi
India
    </pre>

</body>
</html>

Output

Address

John Smith
25 Park Road
New Delhi
India

Step-by-Step Explanation

  • <pre> preserves spaces and line breaks.
  • Text appears exactly as written.
  • It is useful for code blocks and formatted text.

Question 6

Problem Statement

Display a multi-line code block using <pre> and <code>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Code Block</title>
</head>
<body>

    <h1>HTML Example</h1>

    <pre><code>
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
    </code></pre>

</body>
</html>

Output

HTML Example

&lt;!DOCTYPE html>
&lt;html>
&lt;body>
&lt;h1>Hello World&lt;/h1>
&lt;/body>
&lt;/html>

Step-by-Step Explanation

  • <pre> preserves formatting.
  • <code> identifies the content as code.
  • Using both together is ideal for displaying multi-line code examples.

Question 7

Problem Statement

Display multiple keyboard shortcuts.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Keyboard Shortcuts</title>
</head>
<body>

    <h1>Common Shortcuts</h1>

    <p><kbd>Ctrl</kbd> + <kbd>C</kbd> : Copy</p>

    <p><kbd>Ctrl</kbd> + <kbd>V</kbd> : Paste</p>

    <p><kbd>Ctrl</kbd> + <kbd>Z</kbd> : Undo</p>

</body>
</html>

Output

Common Shortcuts

Ctrl + C : Copy

Ctrl + V : Paste

Ctrl + Z : Undo

Step-by-Step Explanation

  • <kbd> highlights keyboard keys.
  • It improves readability in tutorials.
  • It is commonly used in documentation.

Question 8

Problem Statement

Display terminal output using the <samp> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Terminal Output</title>
</head>
<body>

    <h1>Command Result</h1>

    <p><code>python app.py</code></p>

    <p><samp>Application Started Successfully</samp></p>

</body>
</html>

Output

Command Result

python app.py

Application Started Successfully

Step-by-Step Explanation

  • <code> displays the command entered.
  • <samp> displays the output produced by the program.
  • This combination is common in programming documentation.

Question 9

Problem Statement

Display variables inside a programming formula.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Variables</title>
</head>
<body>

    <h1>Rectangle Area</h1>

    <p>

        <var>area</var> =

        <var>length</var> ×

        <var>width</var>

    </p>

</body>
</html>

Output

Rectangle Area

area = length × width

Step-by-Step Explanation

  • <var> identifies variables.
  • It is useful for formulas and programming examples.
  • Variables are usually displayed in italic text.

Question 10

Problem Statement

Create a webpage that uses all HTML code elements together.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Code Elements Example</title>
</head>
<body>

    <h1>Programming Tutorial</h1>

    <p>Run the following command:</p>

    <pre><code>python app.py</code></pre>

    <p>Output:</p>

    <p><samp>Application Started</samp></p>

    <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop the program.</p>

    <p>Variable: <var>count</var></p>

</body>
</html>

Output

Programming Tutorial

python app.py

Output:
Application Started

Press Ctrl + C to stop the program.

Variable: count

Step-by-Step Explanation

  • <code> displays code snippets.
  • <pre> preserves formatting.
  • <samp> displays program output.
  • <kbd> represents keyboard input.
  • <var> represents variables.
  • Together, these elements create professional programming documentation.

Key Takeaways

  • <code> displays short code snippets.
  • <pre> preserves spaces and line breaks.
  • <pre> and <code> are commonly used together for multi-line code.
  • <kbd> represents keyboard input.
  • <samp> displays program or terminal output.
  • <var> represents variables in formulas and programming.
  • These elements improve the readability of technical content.
  • Browsers usually display these elements in monospace fonts.
  • HTML code elements are widely used in tutorials and documentation.
  • They are supported by all modern browsers.

Frequently Asked Questions (FAQs)

1. What is the <code> element used for?

It is used to display short programming code snippets.

2. What is the <pre> element used for?

It preserves spaces and line breaks exactly as written.

3. Why are <pre> and <code> often used together?

They display multi-line code while preserving formatting.

4. What does the <kbd> element represent?

It represents keyboard input, such as shortcut keys.

5. What is the <samp> element used for?

It displays sample output from a program or terminal.

6. What does the <var> element represent?

It represents variables used in programming or mathematical formulas.

7. Do these elements change how the code runs?

No. They only affect how the content is displayed.

8. Which font is commonly used for code elements?

Browsers usually display them using a monospace font.

9. Can I use these elements together?

Yes. They are often combined in programming tutorials and technical documentation.

10. Are HTML code elements supported in all browsers?

Yes. They are fully supported by all modern web browsers.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top