Code, kbd and samp

Learn <code>, <kbd>, <samp> and <var>.

code: a piece of code

The <code> tag marks a piece of computer code. It holds an HTML tag name, a command or a function name. Browsers show the content in a monospaced font.

Example: <code>article</code>. The reader now sees that 'article' is not a plain word but a tag name. For long code blocks you will later meet the <pre> tag as well.

kbd and samp: key and output

The <kbd> tag marks keyboard input from the user: a key or a key combination. Example: <kbd>Ctrl</kbd> + <kbd>S</kbd>.

The <samp> tag marks the sample output of a program. Example: <samp>File saved.</samp>. Now 'the user pressed' and 'the program replied' are kept apart; both render in a monospaced font.

var: variable

The <var> tag marks a mathematical or programming variable. Browsers usually show the content in italics; what matters is meaning: this is not a constant, but a name that can take a value.

Example: <p><var>x</var> = <var>y</var> + 2</p>. The reader now sees that 'x' and 'y' are variables, not plain text. It helps with math and algorithm explanations.

Exercise Write code, a key, output and a variable

Add four paragraphs to body. The first holds a <code> tag with content save(). The second holds two <kbd> tags: the first with Ctrl, the second with S; put a + sign between them. The third holds a <samp> tag with content File saved. The fourth holds a <var> tag with content fileName.

Show example solution

<body>
  <p>Command: <code>save()</code></p>
  <p>Shortcut: <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
  <p>Result: <samp>File saved.</samp></p>
  <p>Variable: <var>fileName</var></p>
</body>

Test yourself

Which tag marks keyboard input?
- <code>
- <samp>
- <kbd>
- <input>
Show answer

<kbd> — Correct. kbd marks keyboard input.

Complete the code tag

<p>The paragraph tag is written with <____>p</code>.</p>

Show answer

<p>The paragraph tag is written with <code>p</code>.</p>

Match each tag to its role

<code>

Computer code
<kbd>

Keyboard input
<samp>

Program output
<var>

Variable

Next lesson: Sub and sup

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies