HTML Computercode

Understand the topic

HTML has elements for code and technical text. code identifies a code fragment, pre preserves whitespace, kbd marks user input, samp marks program output, and var marks a variable. Combine pre and code for multi-line examples. Escape markup inside a displayed example so the browser shows the tags rather than interpreting them.

Worked example

<p>Save with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<pre><code>&lt;p&gt;Hello&lt;/p&gt;</code></pre>
<p>The program prints <samp>Ready</samp>.</p>
<p>Let <var>n</var> be the number of learners.</p>

The escaped paragraph appears as code. pre preserves line breaks, while code provides the semantic description.

Practice

Display the literal HTML <h1>Welcome</h1> in a code block.

<pre><code>&lt;h1&gt;Welcome&lt;/h1&gt;</code></pre>

Common mistake

Unescaped < characters can start real tags. Escape &, <, and > when displaying markup.

HTML documentation