HTML <code> element

The <code> element represents a fragment of computer code. It is used for things such as HTML tags, CSS property names, JavaScript expressions, file names, commands, selectors, or short pieces of source text.

The element marks the text as code without executing it. Browsers normally use a monospace font, but the colours, background, and other styling on this reference page are supplied by CSS.

For short code fragments inside a paragraph, <code> is usually enough. For longer blocks where spacing and line breaks matter, it is normally placed inside <pre>. The two elements then work together: <pre> preserves the layout, and <code> gives the text its code meaning.

The <code> element should not be used for every technical-looking word. A browser name, product name, or ordinary phrase about computing is not automatically code. It is best saved for text that the reader could type, inspect, copy, or recognise as part of a formal language or system.

It is also different from <kbd> and <samp>. The <kbd> element marks what the user enters. The <samp> element marks what the system outputs. The <code> element marks code itself.

HTML inside <code> is still parsed as markup. To display a literal tag such as <p>, write <p> in the source. Write & for a literal ampersand when showing character references.

Syntax highlighting is not built in. A class such as language-javascript can identify the language for a highlighting tool, but the class alone does not add colours.

Attributes: GLOBALS.

Typical layout:
<p>
  Use <code>display: grid;</code>
  to create a grid container.
</p>

Visual representation: