Text & Formatting

<code>, <pre>, <kbd>, <samp>, <var>

Display code, keyboard input, output samples, and variables.

1Code-Related Tags

<code> is inline computer code. <pre> preserves whitespace (perfect for code blocks). <kbd> is keyboard input. <samp> is sample output. <var> is a variable.

Example Code

css

<p>Use the <code>map()</code> method.</p>

<pre><code>function hello() {
  console.log('hi');
}</code></pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Output: <samp>404 Not Found</samp></p>
<p>Solve for <var>x</var>.</p>

2Put the element in context

Code identifies a code fragment, pre preserves formatting, and kbd represents user input. A long code block may need horizontal scrolling, while a short inline fragment should remain part of the sentence. Literal markup inside an example must be escaped so it is shown instead of executed.

3Practice with a small page

Display a small HTML example inside pre and code using escaped angle brackets. Add a keyboard instruction using kbd. Check the block on a narrow screen and keep the scrolling region separate from the page’s ordinary text layout.

Finished reading?

Mark this topic as complete to track progress.

Next Topic