HTML Computer Code

Understanding HTML Computer Code

HTML provides several elements for identifying computer-related text, including source code, keyboard input, program output, and variables. These elements give technical content meaningful structure instead of relying only on monospace fonts or other visual styling.

The primary elements are <code>, <kbd>, <samp>, and <var>. Each represents a different type of computer or technical information.

Computer Code with <code>

The <code> element represents a fragment of computer code. It can be used for HTML elements, CSS properties, JavaScript statements, commands, filenames, and other pieces of code.

<p>Use the <code>color</code> property to change the text color.</p>

Browsers commonly display <code> content using a monospace font, but the element's purpose is to identify the content as computer code rather than simply change its appearance.

Code Blocks

The <code> element is inline by default. When displaying a larger block of code where spaces and line breaks need to be preserved, it is commonly placed inside a <pre> element.

<pre><code>body {
  font-family: Arial, sans-serif;
  color: #333333;
}</code></pre>

The <pre> element preserves the whitespace and line breaks in the code, while <code> identifies the content as computer code.

Keyboard Input with <kbd>

The <kbd> element represents user input, typically input entered using a keyboard, although it can also represent other forms of user input.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the document.</p>

This element is useful in tutorials, instructions, and software documentation when explaining keys, commands, or other input that a user should enter.

Program Output with <samp>

The <samp> element represents sample output produced by a computer program or system.

<p>The program displays: <samp>File saved successfully.</samp></p>

Use <samp> when showing a message, result, or other output that a program or computer system would display to the user.

Variables with <var>

The <var> element represents a variable in a mathematical expression, programming context, or similar technical notation.

<p>The area of a rectangle is <var>w</var> × <var>h</var>.</p>

Browsers commonly display <var> content in italics, but its semantic purpose is to identify the text as a variable.

HTML Computer Code Example

The following example combines the computer-related text elements so you can compare their purposes and default browser presentation.

<p>The CSS property <code>color</code> changes the text color.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the document.</p>

<p>The program displays: <samp>File saved successfully.</samp></p>

<p>The value is stored in the variable <var>x</var>.</p>

Try changing the elements in the editor to see how each one identifies a different type of technical content.

Displaying HTML Code

When HTML code is displayed as text on a webpage, characters such as < and > must be represented so the browser does not interpret the example as actual markup.

<p>Hello, World!</p>

The browser displays this as <p>Hello, World!</p>. The less-than and greater-than characters can be written using the HTML entities &lt; and &gt;.

Styling Computer Code with CSS

CSS can be used to change the appearance of computer-related text while preserving the meaning provided by the HTML elements.

code {
  font-family: monospace;
  background-color: #f2f2f2;
  padding: 2px 4px;
}

You can style <code>, <kbd>, <samp>, and <var> independently when their different roles should also have different visual treatments.

Computer Code Best Practices

• Use <code> to identify fragments of computer code.
• Combine <pre> and <code> when displaying blocks of code that require preserved whitespace.
• Use <kbd> for keyboard or other user input.
• Use <samp> for sample output from a program or computer system.
• Use <var> for variables in programming, mathematical, or technical contexts.
• Encode HTML markup when it should appear as text instead of being interpreted by the browser.
• Use CSS to control visual presentation rather than choosing an element only for its default appearance.

Summary

HTML provides specialized elements for computer-related content: <code> identifies computer code, <kbd> represents user input, <samp> represents program output, and <var> identifies variables. For larger code examples, <pre> can preserve the original spacing and line breaks.