<code> / <kbd> / <var>

code marks up a fragment of program code, kbd marks up keyboard input, and var marks up variable names or placeholders — each as an inline semantic element.

Syntax

<!-- Code fragment -->
<code>document.getElementById("id")</code>

<!-- Keyboard input / key name -->
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<!-- Variable / placeholder -->
<var>x</var> = <var>y</var> + 1

<!-- Sample output (samp) -->
<samp>Error: File not found</samp>

Tag List

Tag	Description
code	Represents a fragment of program code, a filename, or a command. Displayed in a monospace font by default.
kbd	Represents text to be typed on a keyboard, or a key name. Used for instructions such as "press the Enter key". Displayed in a monospace font by default.
var	Represents a variable name or placeholder in a mathematical expression or program. Displayed in italic by default.
samp	Represents sample output from a program or command. Displayed in a monospace font by default.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    /* Style kbd to look like a keyboard key */
    kbd {
      display: inline-block;
      padding: 2px 6px;
      border: 1px solid #ccc;
      border-radius: 3px;
      background: #f6f6f6;
      font-size: 0.9em;
    }
  </style>
</head>
<body>

  <!-- Use code to mark up a code fragment -->
  <p>To get an element in JavaScript, use <code>document.getElementById()</code>.</p>

  <!-- Use code to mark up a filename -->
  <p>Edit the configuration file <code>config.json</code>.</p>

  <!-- Use kbd to describe key operations -->
  <p>To copy, press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>
  <p>To save, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

  <!-- Use var to mark up a variable name -->
  <p>Formula for area: <var>area</var> = <var>width</var> × <var>height</var></p>

  <!-- Use samp to show command output -->
  <p>Running the command produces the following output:</p>
  <samp>Hello, World!</samp>

</body>
</html>

Result

code renders in a monospace font to look like code. kbd also uses a monospace font (and looks like a keyboard key when styled with CSS). var renders in italic.

To get an element in JavaScript, use document.getElementById().
Edit the configuration file config.json.
To copy, press [Ctrl] + [C].
Formula for area: area = width × height  ← italic
Hello, World!

Notes

All of these elements render in a monospace font (or italic) by default, but that is simply the browser's default styling. What matters is conveying the correct meaning. For example, when mentioning a method name in a description, use code not because you want a monospace font, but because you want to communicate "this is code".

To display a multi-line code block, combine pre with code. pre preserves whitespace and line breaks, while code provides the semantic meaning of "this is code" (e.g., <pre><code>...</code></pre>).

kbd is not limited to keyboard input — it can also be used for voice commands, game controller buttons, or any other input from the user. Adding a border and background color via CSS gives it a keyboard-key appearance, which makes instructions easier to follow.