This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.

Smartphone icons created by Freepik - Flaticon

6.1 HTML Computercode

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

Example 1: HTML code element
<code>
x = 5;
y = 6;
z = x + y;
</code>

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 2: HTML kbd element

Define some text as keyboard input in a document:

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Result:

Save the document by pressing Ctrl + S

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 3: HTML samp element

Define some text as sample output from a computer program in a document:

<p>Message from my computer:</p>
<p><samp>File not found.
<br>Press F1 to continue</samp></p>

Result:

Message from my computer:
File not found.
Press F1 to continue

HTML <code> For Computer Code

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 4:

Define some text as computer code in a document:

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

Result:

x = 5; y = 6; z = x + y;

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:

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

Result:

x = 5;
y = 6;
z = x + y;

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 6: HTML var element

Define some text as variables in a document:

<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>

Result:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

Chapter Summary

HTML Computer Code Elements

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

For a complete list of all available HTML tags, visit HTML Tag Reference.

This site is 📱 accessible. Press the "Tap Here" button to use the mobile stylesheet.

HTML Course Home
Module 6: Entities, Symbols and Encoding