Displaying Computer Code in HTML

HTML provides special tags for displaying computer code, keyboard shortcuts, outputs, or preformatted text. These help distinguish code visually from regular content.

The <code> Element

The <code> element is used for inline display of a single line or small snippet of code. It typically appears within surrounding text.

<p>To print something, use <code>console.log()</code> in JavaScript.</p>

The <pre> Element

The <pre> (preformatted) tag preserves whitespace, line breaks, and exact formatting. It’s ideal for code blocks and often used with <code>.

<pre>
function greet(name) {
  console.log("Hello " + name);
}
</pre>

The <kbd> Element

The <kbd> tag marks keys or key combinations the user should press, such as Ctrl + C, Enter, or ESC.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

The <samp> Element

The <samp> tag represents output from a computer or program. It's used for displaying results like error messages or system responses.

<p>The output is: <samp>File not found.</samp></p>

Best Practices

Use <code> for short inline snippets and <pre> for full code blocks. Avoid mixing too many styles—clarity is key.

Visual Example

This is how you can combine <pre> and <code> to display properly formatted code:

<pre><code>
function sum(a, b) {
  return a + b;
}
</code></pre>

Common Mistakes

Don’t use <code> for long blocks or alone in paragraphs. Always use semantic tags for better understanding.

Code Display Summary

The <code>, <pre>, <kbd>, and <samp> tags each serve specific purposes. They improve readability and accessibility for technical content.