HTML Computer Code Elements

Toggle navigation
TUTORIAL HOME
HTML Computer Code Elements
❮ Previous Next ❯
Computer Code
<code>
x = 5;
y = 6;
z = x + y;
</code>
»
HTML Computer Code Formatting
HTML normally uses variable letter size and spacing.

This is not what we want when displaying computer code.

The <kbd>, <samp>, and <code> elements are all displayed in fixed letter size and spacing.

HTML <kbd> For Keyboard Input
The HTML <kbd> element defines keyboard input:

Example
<p>Use the command <kbd>ctrl + S</kbd> to save</p>
Result:

Use the command ctrl + S to save
»
HTML <samp> For Computer Output
The HTML <samp> element defines sample output from a computer program:

Example
<samp>
demo.example.com login: Apr 12 09:10:17
</samp>
Result:

demo.example.com login: Apr 12 09:10:17
»
HTML <code> For Computer Code
The HTML <code> element defines a piece of programming code:

Example
<code>
x = 5;<br>
y = 6;<br>
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
<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 defines a variable.

The variable could be a variable in a mathematical expression or a variable in programming context:

Example
Einstein wrote: <var>E</var> = <var>m</var><var>c</var>².
Result:

Einstein wrote: E = mc2.
»
Test Yourself with Exercises!
Exercise 1 »   Exercise 2 »   Exercise 3 »

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

❮ Previous Next ❯