HTML Computer code

Different HTML tags are used for the user inputs, codes, programs, etc. to show the output result, error message, or coding part to the user on a webpage when needed. Some of these tags are: <code, <kbd>, <samp>, <var> and <pre>.

HTML <code> element:

To add programming code to a website the HTML <code> element is used. It displays the content in a default monospace font.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML CODE Element</h2>
<p>Example:</p>
<code>
x = 5z;
y = 6z;
z = 50;
w = x * y;
</code>
</body>
</html>

Explanation:

In the above example, we display the use of the HTML <code> element.

HTML <kbd> element:

To represent a user or keyboard input a voice command or similar inputs the HTML <kbd> element is used. It displays the contents in the browser’s default monospace font.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML KBD Element</h2>
<h4>Example:</h4>
<p>Cut Data: <kbd>Ctrl + X</kbd></p>
<p>Copy Data: <kbd>Ctrl + C</kbd></p>
<p>Paste Data: <kbd>Ctrl + V</kbd></p>
</body>
</html>

Explanation:

In the above example, we display the use of the HTML <kbd> element.

HTML <samp> element:

To represent the output of a program, the HTML <samp> element is used. It displays the content in the browser’s default monospace font.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML SAMP Element</h2>
<p>Example:</p>
<samp>Error! I am an Example.</samp>
</body>
</html>

Explanation:

In the above example, we display the use of the HTML <samp> element.

HTML <var> element:

To define a variable of a mathematical expression or a variable of any programming context the HTML <var> element is used.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML VAR Element</h2>
<p>Ohm's Law: <var>V</var> = <var>I</var> / <var>R</var></p>
</body>
</html>

Explanation:

In the above example, we are displaying the use of the HTML <var> element.

HTML <pre> element:

To define the preformatted text, the HTML <pre> element is used. It displays the content in its original format without any formatting thus displaying the content in a fixed-width font.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML PRE Element</h2>
<h4>Example:</h4>
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
 
    Twinkle, twinkle, little star,
    How I wonder what you are!
    Up above the world so high,
    Like a diamond in the sky.

Explanation:

In the above example, we are displaying the use of the HTML <pre> element. All the spaces and line breaks are thus preserved in the output, as in the input.

Please follow and like us: