In HTML there are various tags which help us to show output result, error message, or coding part to user on a webpage.
HTML <code> element
The HTML <code>
element is used to define a piece of computer code. It is used to display some programming code on website. The content written between <code>….</code> tag will be displayed in default monospace font.
Notice that the <code>
element does not preserve extra whitespace and line-breaks. To fix this, you can put the <code>
element inside a <pre>
element.
HTML <kbd> element
It is used to represent user input, keyboard input, voice command etc. The content inside is displayed in the browser’s default monospace font.
HTML <samp> element
The <samp>
tag is used to define sample output from a computer program. Text written within samp element is typically displayed in the browser’s default monospace font.
HTML <var> element
The HTML <var> element is used to define a variable. The variable could be a variable in a mathematical expression or a variable in programming context. The content inside is typically displayed in italic.
HTML <pre> element
The <pre> element defines preformatted text, which displays the content within it in a fixed-width font and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
HTML Computer code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>HTML Computer code example</title>
</head>
<body>
<h3>Define some text as computer code in a document:</h3>
<code>
x = 5;
y = 6;
z = x + y;
</code>
<p>Notice that the <code> element does not preserve extra whitespace and line-breaks. To fix this, you can put
the <code> element inside a <pre> element:</p>
<pre><code>
x = 5;
y = 6;
z = x + y;
</code></pre>
<h3>HTML <var> For Variables</h3>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
<h3>HTML <kbd> For Keyboard Input</h3>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
<h3>HTML <samp> For Program Output</h3>
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
<h3>Preformatted text:</h3>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>