Code & Preformatted (<code>, <pre>, <kbd>) — HTML

Displaying Code and Technical Text

Documentation and tutorials constantly need to show code, terminal output, keyboard shortcuts, and placeholder variables. HTML has five purpose-built elements for exactly this: <code>, <pre>, <kbd>, <samp>, and <var>. Every one of them renders in the browser's default monospace font, which is your visual clue you're looking at technical content.

<code> — Inline Code

<code> marks a short fragment of computer code inline with regular text—a function name, a variable, a CLI flag, or a filename.

inline-code.html

HTML

<p>Call <code>Array.prototype.map()</code> to transform a list without mutating it.</p>
<p>Run <code>npm install</code> before starting the dev server.</p>

<pre> — Preformatted Text

<pre> preserves whitespace exactly as written in the source—line breaks, indentation, and multiple spaces are all preserved. Unlike normal HTML, whitespace inside a <pre> element is not collapsed, and lines do not wrap by default.

pre.html

HTML

<pre>
function greet(name) {
    return "Hello, " + name;
}
</pre>

Whitespace-sensitive

Everything inside <pre>, including the newline after the opening tag, is rendered literally. Be careful not to introduce accidental blank lines, and escape < and > when displaying raw HTML.

Combining <pre><code>

The standard pattern for multi-line code is <pre><code>. The <pre> element preserves formatting, while <code> provides the semantic meaning that the content is source code. Syntax highlighters rely on this pattern.

pre-code.html

HTML

<pre><code class="language-js">function add(a, b) {
  return a + b;
}</code></pre>

Why both?

<pre> controls how the text is displayed, while <code> describes what the content actually is. Together they provide both correct rendering and proper semantics.

<kbd> — Keyboard Input

<kbd> represents keyboard input or user-entered commands. It's the correct element for documenting shortcuts and key combinations.

kbd.html

HTML

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy, and <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste.</p>
<p>Save the file with <kbd>Cmd</kbd> + <kbd>S</kbd> on macOS.</p>

<samp> — Sample Output

<samp> represents sample output from a program or system. It's the opposite of <kbd>: the latter is what the user types, while <samp> is what the program prints.

samp.html

HTML

<p>Type <kbd>git status</kbd> and you should see:</p>
<p><samp>On branch main. Your branch is up to date with 'origin/main'.</samp></p>

<var> — Variables

<var> marks variables in mathematical expressions or programming examples. Browsers typically render it in italics.

var.html

HTML

<p>The area of a circle is <var>π</var><var>r</var><sup>2</sup>.</p>
<p>In the function signature <code>greet(<var>name</var>)</code>, <var>name</var> is a string.</p>

All Five Together

terminal-walkthrough.html

HTML

<p>Open a terminal and type <kbd>node -v</kbd>.</p>
<p>You should see output similar to <samp>v20.11.0</samp>.</p>
<p>
  This calls the function <code>getVersion(<var>target</var>)</code>
  internally, where <var>target</var> defaults to <code>"node"</code>.
</p>

Quick Reference

Element	Represents	Default style
<code>	A short inline code fragment	Monospace
<pre>	Whitespace-preserving block	Monospace, no wrapping
<kbd>	Keyboard input	Monospace
<samp>	Program output	Monospace
<var>	Variable	Monospace italic

Nest <code> inside <pre> for multi-line code blocks.
Use <kbd> for user input and <samp> for program output.
All five elements are inline by default except <pre>, which is block-level.

Styling is still your job

These elements have basic browser defaults, but production websites typically style them with CSS while keeping their semantic meaning intact.