HTML Computer Code Elements

When we are programming, sometimes we have to show the user on a webpage the Output result, an error message, or a part of the code. So, HTML uses different tags for user inputs, codes, programmes, etc., to solve this problem. With these tags, you can write codes that will show up on your webpage.

Table of Contents

Here is a list of some HTML tags that can be used for this task.

<kbd>: The <kbd> element describes input from the keyboard.
<samp>: The <samp> element shows examples of what a computer programme produces.
<code>: A piece of code is defined by the <code> element.
<var>: In programming or math expressions, the <var> element defines a variable.
<pre>: The <pre> element defines text that is already formatted.

HTML <kbd> Element

It is used to show user input, such as keystrokes, voice commands, and so on. Text written between kbd>…/kbd> tags is usually shown in the monospace font that comes with the browser.

Example

<!DOCTYPE html>
<html>
<body>
<h2>kbd Element</h2>
<p>Hello, <kbd>This is example of kbd element.</kbd></p>
</body>
</html>

HTML <samp> For Program Output

The HTML <samp> element is used to show examples of what a programme does. The browser\’s default monospace font is used to show the text inside.

Example

<!DOCTYPE html>
<html>
<body>
<h2>samp Element</h2>
<p>Hello, <samp>This is example of samp element.</samp></p>
</body>
</html>

HTML <code> element

It is used on your website to show some programming code. The default monospace font will be used to show the text between tags.

Example

<!DOCTYPE html>
<html>
<body>
<h2>code Element</h2>
<p>Hello,<code>This is example of code element.</code></p>
</body>
</html>

HTML <var> element

A variable is set up with the HTML <var> element. The variable could be a variable in a mathematical expression or a variable in programming.

Example

<!DOCTYPE html>
<html>
<body>
<h2>var Element</h2>
<p>This is example of <var>var element</var>. where <var>var </var> is the base </p>
</body>
</html>

HTML <pre> element

The <pre> element defines preformatted text, which shows the text inside it in a font with a fixed width. It keeps the content in the same format it was in before and ignores any formatting.

Example

<!DOCTYPE html>
<html>
<body>
<h2>pre Element</h2>
<p>This is example of pre element. </p>

<pre>
<code>
a = 15;
c = 20;
c = b – a;
</code>
</pre>

</body>
</html>

Notice that the <code> element doesn\’t keep extra whitespace and line breaks. Put the <code> element inside a <pre> element to fix this.

Tag	Description
<code>	Defines programming code is defined.
<kbd>	Defines keyboard input
<samp>	Defines computer output
<var>	Defines a variable
<pre>	Defines preformatted text