Markup CityISSUE #31 of 39

<code> · <pre> · <kbd> · the computer tags

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysComputer-code tags mark up code and output: <code>, <pre>, <kbd>, <samp>, and <var>.

When you show code, use the right tags. <code> marks an inline snippet (monospace). <pre> preserves whitespace and line breaks — wrap a <code> in a <pre> for a multi-line block. <kbd> marks keyboard input, <samp> program output, <var> a variable.

These carry meaning and get sensible default styling, so screen readers and copy/paste behave correctly — better than faking it with a styled span.

Power-ups you unlock

<code> = inline code · <pre> = preserves whitespace
<pre><code> together = a multi-line code block
<kbd> input · <samp> output · <var> variable
Semantic and monospaced by default

The Unclosed Tag attacks — common mistakes

Using <code> alone for multi-line code (whitespace collapses)
Faking code blocks with styled <div>s
Forgetting to escape < and > inside code as < >

Boss battleShow a one-line command inline with <code>, then a multi-line snippet inside <pre><code>. Mark a shortcut like Ctrl+S with <kbd>.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff">
  <p>Run <code>npm start</code> then press <kbd>Ctrl</kbd>+<kbd>C</kbd> to stop.</p>
  <pre style="background:#0c081a;padding:10px"><code>function hi(){
  return 'whitespace preserved';
}</code></pre>
</body></html>

▶ Open the interactive comic issue

‹ Responsive · Sizing For Any Screen Semantic Tags · Header · Main · Article · Footer ›