Code and pre: marking up code

What they are

code is inline: it marks a phrase as computer code, an element name, a file path, or a command, and browsers render it in a monospace face. pre is a block that preserves whitespace exactly as written, where other elements collapse runs of spaces and newlines into single spaces.

An inline mention needs only code. A multi-line sample needs both, because each solves half the problem:

<p>Set <code>box-sizing</code> before anything else.</p>

<pre><code>*,
*::before,
*::after {
  box-sizing: border-box;
}</code></pre>

pre keeps the line breaks and indentation; code says the preserved text is code rather than poetry or ASCII art, which also use pre.

The escaping requirement

Code samples routinely contain the characters HTML reserves. Inside a sample, a literal < must be written as < and a literal & as &, or the parser will read your sample as markup and swallow it. This is the single most common way a published code sample silently loses its content: the page renders, the sample looks plausible, and half of it was parsed as broken tags instead of displayed. If a snippet you pasted looks mysteriously shorter on the page than in your editor, this is the first thing to check.

Behavior worth knowing

Whitespace inside pre is truly literal, which means indentation in your source file becomes indentation on the page. A pre block indented to match surrounding markup will render with that extra leading whitespace; authors usually left-align the sample's content even when it makes the source uglier.

Long lines do not wrap by default. On narrow viewports an unwrapped sample is the classic cause of page-level horizontal overflow; give the block its own scrolling with overflow-x: auto so the sample scrolls instead of the page.

Accessibility

Screen readers do not announce code boundaries by default, so never let the monospace styling be the only signal that something is code when the distinction matters to the sentence. Write the sentence so it works read aloud. For blocks, keep samples selectable text rather than images of text: images exclude screen reader users, break copy-paste, and fail anyone who zooms.

Common failures

• Unescaped < and & swallowing part of a sample.
• Code shipped as a screenshot, unreadable to assistive technology and uncopyable for everyone.
• Page-wide horizontal scroll caused by an unwrapped pre on a phone.
• Monospace styling applied to a span where code was the honest element.
• Source-file indentation rendered accidentally at the start of every line.

Verify it

Compare the rendered sample character by character against the source it came from, especially around angle brackets. Then view the page at 320 pixels wide and confirm the sample scrolls inside its own box while the page stays put.