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