Module 4: Text Content and Inline Semantics
Code, Preformatted Text, and Technical Output
Present code and terminal output while preserving the distinction between inline code and code blocks.
Technical writing often needs to mention a tag, attribute, command, or short expression inside a sentence. Use code for a fragment such as required, href, or npm run build.
For a multi-line example, combine pre and code:
<pre><code><main>
<h1>Release notes</h1>
<p>Version 2.1 is available.</p>
</main></code></pre>
The pre element preserves whitespace, which is important for indentation in code samples. The code element identifies the content as code. In an ordinary HTML document, characters such as < and & must be represented so they are displayed rather than parsed as markup.
kbd represents user input, such as Ctrl + S. samp represents sample program output:
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>
<p>The terminal prints <samp>Build completed</samp>.</p>
Do not use pre just to force a paragraph into a monospace font. Use the semantic elements when the content is truly code, user input, or program output.