HTML Computer Code
The HTML contains several elements for defining user input and computer code
HTML Computer Code Elements
| Tags | Description |
|---|---|
| <code> | Defines that the enclosed text is source code in a programming language. |
| <kbd> | Defines text as keyboard input. |
| <span> | Defines the span text for styling. |
| <pre> | Defines the enclosed text is preformatted, meaning that spaces, returns, tabs, and other formatting characters are preserved. |
| <var> | Defines a variable. |
HTML <code> For Computer Code
The <code> element indicates that the enclosed text is source code in a programming language.
Note: This element is best used for short code fragments because it does not preserve white space.
Example
<code>
c = a + b;
a = 6;
b = 3;
c = ?;
</code>
HTML <kbd> For Keyboard Input
The <kbd> inline element logically indicates text as keyboard input.
Example
<p>To copy the selected item press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>
HTML <var> For Variables
The <var> element is used to indicate a variable (an identifier that occurs in a programming language or a mathematical expression), with any enclosed text generally rendered in italics.
Example
<p>A simple equation: <var>z</var> = <var>x</var> + <var>y</var></p>
HTML <samp> For Program Output
The <samp> logical inline element is used to specifies sample text. Enclosed text generally is rendered in a monospaced font.
By default, most browsers render the contents of <samp> elements in a fixed-width, monospaced font, but you can change that with CSS properties.
If you are looking to mark up programming code, the <code> element would be more appropriate.
If you are looking to indicate user input (e.g. from a keyboard), the <kbd>kbd element is more appropriate.
Note: The samp element is a phrasing-level element. It must not contain block-level elements, but it can contain other phrasing-level elements.
Example
<p>This is <samp>sample</samp> text</p>
HTML <pre> For Preformation
The <pre> element is used to specifies that the enclosed text is preformatted, meaning that spaces, returns, tabs, and other formatting characters are preserved.
Example
<pre>This text is formatted
exactly
as
it
is
typed.</pre>
HTML Computer Code Elements
| Tags | Description |
|---|---|
| <code> | Defines that the enclosed text is source code in a programming language. |
| <kbd> | Defines text as keyboard input. |
| <span> | Defines the span text for styling. |
| <pre> | Defines the enclosed text is preformatted, meaning that spaces, returns, tabs, and other formatting characters are preserved. |
| <var> | Defines a variable. |
Note: A complete list of all HTML tags, see HTML Tag Reference.