HTML Computer Code Elements
Computer Code
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
HTML Computer Code
Formatting
Normally, HTML uses variable letter size, and variable
letter spacing.
This is not wanted when displaying examples of
computer code.
The <kbd>, <samp>, and
<code> elements all support fixed letter size
and spacing.
HTML Keyboard
Formatting
The HTML <kbd> element defines keyboard
input:
Example
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
HTML Sample
Formatting
The HTML <samp> element defines a computer output sample:
Example
<samp>
demo.example.com login: Apr 12 09:10:17
Linux
2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
Try it Yourself »
HTML Code
Formatting
The HTML <code> element defines programming
code sample:
Example
<code>
var person = { firstName:"John", lastName:"Doe",
age:50, eyeColor:"blue" }
</code>
Try it Yourself »
The <code> element does not preserve extra
whitespace and
line-breaks:
Example
<p>Coding Example:</p>
<code>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</code>
Try it Yourself »
To fix this, you must wrap the code in a <pre> element:
Example
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</pre>
</code>
HTML Variable
Formatting
The HTML <var> element defines a
mathematical variable:
Example
<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>
HTML Computer Code Elements
| Tag |
Description |
| <code> |
Defines computer code text |
| <kbd> |
Defines keyboard text |
| <samp> |
Defines sample computer code |
| <var> |
Defines a variable |
| <pre> |
Defines preformatted text |
Color Picker
