HTML Computer Code
A number of elements in HTML Computer Code are used to define computer code and human input.
Example
<code>
x = 3;
y = 4;
z = x + y;
</code>
HTML < kbd > For Keyboard Input
The keyboard input is defined via the HTML <kbd> element. The default monospace typeface of the browser is used to display the material inside.
Example
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
You can define sample output from a computer program using the HTML <samp> element. The default monospace typeface of the browser is used to display the material inside.
Example
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
A segment of computer code is defined by the HTML <code> element. The default monospace typeface of the browser is used to display the material inside.
Example
Define some text as computer code in a document:
<code>
x = 3;
y = 4;
z = x + y;
</code>
Result:
x = 3; y = 4; z = x + y;
Observe that line breaks and excess whitespace are not preserved by the <code> element.
The <code> element can be fixed by nesting it inside a <pre> element:
Example
<pre>
<code>
x = 3;
y = 4;
z = x + y;
</code>
</pre>
Result:
x = 3;
y = 4;
z = x + y;
HTML < var > For Variables
In programming or mathematical expressions, variables are defined using the HTML <var> element. Usually, the text within is shown in italics.
Example
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
- 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 |
HTML Computer Code
html
code
elements
kbd
samp
code
var
computer code
keyboard input
program output
variables
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The “ element is used to represent a fragment of computer code. This is often used to display inline code snippets within a paragraph of text.
The “ (keyboard input) element is used to represent user input, typically from a keyboard. This is useful for showing the specific keys a user should press.
The “ (sample output) element is used to represent sample output from a computer program. This helps to differentiate program output from the surrounding text.
The “ (variable) element is used to represent a variable. This is helpful for indicating when a piece of text represents a variable name within a code example.
Using these semantic HTML elements helps to structure content and provide meaning around computer code within web pages. This improves accessibility and allows screen readers to properly interpret the role of the code.
