kbd, samp, var and code

Four small tags make computer text readable: code, kbd, samp, and var. Each one tells the reader what kind of computer text they are looking at, and each has its own meaning, not just a pretty font. Used well, they turn a wall of text into an instruction a user can follow without guessing.

Code marks a snippet of code in a monospace font. Kbd marks a key the user should press, rendered like a key cap. Samp shows the output a program produces, and var shows a variable name in italics. Documentation, tutorials, and error messages are built from these four.

Why they exist: writing a page about software means quoting code all day, and plain text loses the distinction between what the user types, what the program prints, and what is a placeholder. These tags restore the difference, for readers and for screen readers. All four work in every browser.

The classic combo

A keyboard shortcut is the perfect example of all four working together. Code names the command, kbd shows the keys, samp shows what the program prints, and var holds the placeholder value. Read the sentence below and notice how each tag tells you something different.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <var>file.txt</var>.</p>
<p>The program prints: <samp>Saved successfully</samp></p>

Nesting and blocks

These tags nest naturally. A code block often contains var for placeholders and samp for example output. For multi-line code, wrap a code tag inside a pre tag to keep the line breaks. A common mistake is using code for keys; kbd is the honest tag for anything the user presses.

<pre><code>let <var>name</var> = "Maya";
print(<var>name</var>);</code></pre>

Syntax

<p>Use <code>print()</code> to show <var>text</var>.</p>
<p>Press <kbd>Enter</kbd> to run it.</p>
<p>Output: <samp>Hello world</samp></p>

Run <kbd>npm install</kbd> → see <samp>added 3 packages</samp> in <code>package.json</code> where <var>version</var> matters