HTML Computercode
Technical writing benefits from distinguishing source code, user input, variables, and a program’s output. These elements communicate purpose rather than merely choosing a monospace font.
How it works
- Use code for a code fragment, kbd for user input, samp for program output, and var for a variable or placeholder in an explanation.
- Combine pre and code for a code block whose line breaks and indentation matter. Escape markup when the sample should display rather than execute.
- Offer readable explanations alongside snippets. A code font alone does not explain what the reader should do with the text.
A practical example
<p>Save the file with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>The value <var>count</var> is the number of sessions.</p>
<pre><code><h1>Workshop schedule</h1></code></pre>
<p>Expected message: <samp>File saved.</samp></p>
The heading markup appears as code instead of creating a heading inside the example. The other elements identify input, a variable name, and output.