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.