<code>

By Dan Gold

<code> represents a fragment of computer code, including an element name, function call, or CSS declaration. It accepts phrasing content and normally uses a monospace font.

Inline code and a code block

The same element marks code in a sentence and inside a preformatted block. Escape < as < so example markup displays rather than becoming a real element.

HTML and CSS

HTML

<p>Use <code>display: grid</code> for a grid container.</p>
<pre><code>&lt;div class="cards"&gt;
  Grid content
&lt;/div&gt;</code></pre>

CSS

code {
  font-family: ui-monospace, monospace;
}
pre {
  background: #eff6ff;
  padding: 1rem;
  overflow: auto;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Whitespace and execution

<code> alone does not preserve runs of spaces or newlines. pre supplies preformatted whitespace; CSS can change that behavior. Code markup does not execute its text or highlight syntax automatically.

A language class such as language-css is a convention for highlighting tools, not built-in HTML functionality. Keep code readable when highlighting or JavaScript is unavailable.

Alternatives

Use kbd for user input, samp for sample program output, and var for a variable name. Try removing <pre> in the editor: the code keeps its meaning but its whitespace collapses.

Sources and browser support

MDN: code describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.