HTML contains several elements for defining user input and computer code.
Example
<code>
x = 5;
y = 6;
z = x + y;
</code>Live preview
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
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>Live preview
Expected output
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
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to
continue</samp></p>Live preview
Expected output
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
<code>
x = 5;
y = 6;
z = x + y;
</code>Live preview
Expected output
x = 5; y = 6; z = x + y;
Preserve Line-Breaks
Notice that the <code> element does NOT preserve extra whitespace and line-breaks.
To preserve extra whitespace and line-breaks, you can put the <code> element inside a <pre> element:
Example
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>Live preview
Expected output
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
<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>Live preview
Expected output
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
- The <kbd> element defines keyboard input
- The <samp> element defines sample output from a computer program
- The <code> element defines a piece of computer code
- The <var> element defines a variable in programming or in a mathematical expression
- The <pre> element defines preformatted text
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 our HTML Tag Reference .