<code> / <kbd> / <var>

Since:		HTML 4（1997）

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

sample_code_kbd_var.html

<!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.

View sample page

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.

Browser Compatibility

Desktop

Chrome

1 and later ○

Firefox

1 and later ○

Safari

4 and later ○

3 and earlier ×

Edge

12 and later ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 and later ○

14 and earlier ×

Mobile

iOS Safari

3.2 and later ○

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

Practical Combinations

Combining <code>, <kbd>, and <var> in technical documentation clearly distinguishes different types of information.

<!-- Keyboard shortcut instructions -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, then <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>

<!-- Function description with variable names -->
<p>The function <code>Math.pow(<var>base</var>, <var>exponent</var>)</code> returns <var>base</var> raised to the power of <var>exponent</var>.</p>

<!-- Terminal command with variable parts -->
<p>Run the following command: <code>ssh <var>username</var>@<var>hostname</var></code></p>

<!-- Distinguishing command from output -->
<p>Running <code>ls -la</code> produces the following output:</p>
<pre><samp>total 48
drwxr-xr-x  8 user staff  256 Jan  1 12:00 .
drwxr-xr-x 15 user staff  480 Jan  1 11:00 ..</samp></pre>

CSS Styling

The default monospace font style of each tag can be customized with CSS to match your documentation design.

/* code: inline code styling */
code {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.875em;
  background-color: #f0f0f0;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: #c7254e;
}

/* kbd: keyboard shortcut styling */
kbd {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.8em;
  padding: 0.1em 0.4em;
  border: 1px solid #aaa;
  border-bottom-width: 2px;   /* gives a 3D key effect */
  border-radius: 3px;
  background: linear-gradient(to bottom, #fefefe, #e8e8e8);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* var: variable name styling */
var {
  font-style: italic;
  color: #0066cc;
}

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary