HTML Computer Code Elements
Learn the HTML code, kbd, samp, var and pre elements: what each one means semantically, when to use it, and the multi-line code block pattern.
HTML provides a small family of elements for marking up text that comes from a computer: source code, things you type, program output, and variables. They all render in a monospaced font by default, but they are not interchangeable — each one carries a different meaning. Choosing the right one tells browsers, search engines, and especially screen readers what kind of computer text they are looking at.
This page covers when and how to use each element:
<code>— a fragment of computer code<kbd>— text the user types on a keyboard<samp>— sample output from a program<var>— a variable or placeholder<pre>— preformatted text that keeps whitespace and line breaks- The canonical
<pre><code>pattern for multi-line code blocks
Why semantics matter
Because these tags look almost the same on screen, it is tempting to pick whichever one you remember. Resist that. The visual style is just a default — you can change it with CSS at any time. What you cannot change as easily is meaning.
A screen reader may announce <kbd> and <samp> content differently, search engines use the markup to understand a page, and other developers reading your HTML rely on these tags to know whether Ctrl + C is a key combination (<kbd>) or a string the program printed (<samp>). Use the element that matches the meaning, then style it however you like.
The HTML <code> tag
The HTML <code> tag marks an inline fragment of computer code — a function name, a tag, a CSS property, a shell command, and so on. It does not mean "variable"; for variables use <var>. Browsers display <code> content in a monospaced font.
By itself, <code> is for short, inline snippets. For multi-line blocks, wrap it in <pre> (see below).
Example of the HTML <code> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>The HTML <var> tag
The <var> tag defines a variable in a mathematical expression or a programming context — for example x and y in an equation, or the name of a parameter in prose. It is the correct element for variables (a common point of confusion with <code>). Browsers usually render it in italics.
Example of the HTML <var> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>The HTML <kbd> tag
The <kbd> tag marks keyboard input — text or keys the user is expected to type or press. Use it for shortcuts (Ctrl + V), commands the reader should enter, and individual keys. It renders in a monospaced font by default.
Example of the HTML <kbd> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>The HTML <samp> tag
The <samp> tag marks sample output from a computer program or script — the text the program prints back, as opposed to the code itself (<code>) or what you type (<kbd>). It is displayed in a monospaced font by default.
A useful way to remember the difference: <kbd> is what goes in, <samp> is what comes out.
Example of the HTML <samp> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>The HTML <pre> tag
The <pre> tag defines preformatted text. Unlike normal HTML, the browser keeps every space, tab, and line break exactly as written in the source, and renders the content in a monospaced font. This makes <pre> ideal for ASCII art, fixed-width tables, and — most often — blocks of code where indentation and line breaks must be preserved.
On its own <pre> carries no "this is code" meaning; it only controls formatting. To express that the preformatted text is code, combine it with <code>.
Example of the HTML <pre> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Multi-line code blocks with <pre> and <code>
For a block of source code spanning several lines, the canonical, recommended pattern is to nest <code> inside <pre>. <pre> preserves the whitespace and line breaks; <code> adds the semantic meaning that the content is code. Together they are the standard way to display a code block in HTML.
Example of <pre> with <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Note that the <code> content starts immediately after the opening tag and ends immediately before the closing tag. Any spaces or newlines you leave between <pre> and <code> would be rendered too, since <pre> preserves all whitespace.
Choosing the right element
| Element | Meaning | Typical use |
|---|---|---|
<code> | A fragment of code | An inline function name, tag, or command |
<kbd> | Keyboard input | Shortcuts and text the user types |
<samp> | Sample program output | Text a program prints back |
<var> | A variable | x in an equation, a parameter name |
<pre> | Preformatted text | Multi-line blocks; preserves whitespace |