Skip to main content

HTML Computer Code Elements

HTML contains several elements for defining user input and computer code.

HTML Computer Code Elements

TagDescription
<code>Defines programming code
<kbd>Defines keyboard input
<samp>Defines computer output
<var>Defines a variable
<pre>Defines preformatted text

HTML <code> For Keyboard Input

The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Example:

<!DOCTYPE html>  
<html>
<body>
<h2>Computer Code</h2>
<p>This is a programming code:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>

Output:

Computercode code example

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:

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

HTML <kbd> For Keyboard Input

The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Example:

<!DOCTYPE html>  
<html>
<body>
<h2>The kbd Element</h2>
<kbd>This is how content written within kbd element looks like.</kbd></p>
</body>
</html>

Output:

Computercode code example

HTML <samp> For Program Output

The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Example:

<!DOCTYPE html>  
<html>
<body>
<h2>The samp Element</h2>
<samp>This is how the content within samp element looks like. </samp>
</body>
</html>

Output:

Computercode code example

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example:

<!DOCTYPE html>  
<html>
<body>
<h2>The var Element</h2>
<var>E</var> = <var>mc</var><sup>2</sup>
</body>
</html>

Output:

Computercode code example

HTML <pre> element

The <pre> element defines preformatted text, which displays the content within it in a fixed-width font. It keeps the content into its original format and ignores all formatting.

<!DOCTYPE html>  
<html>
<body>
<h3>Example of pre tag</h3>
<pre>
This is content written
within pre tag, and pre tag will ignore all
spaces, break lines, and will display the content
as in original format.
</pre>
</body>
</html>

Output:

Computercode code example