HTML <code> Tag
The <code> tag is used to insert lines of program code. Description of the tag, attributes and examples of usage.
The <code> tag is used to mark up a fragment of computer code — a variable name, a function call, a snippet of program source, or any text that a user is expected to type or read as code. In the browser, the content is displayed in a monospaced font (a font in which all characters have the same width). The <code> tag is an inline element by default.
The <code> tag is semantic: it tells browsers, assistive technologies, and search engines that the enclosed text is code, not prose. That meaning is the reason to reach for it — the monospaced styling is just the default presentation, which you can override with CSS.
This page covers how <code> behaves on its own, why multi-line code needs to be wrapped in <pre>, the HTML-escaping trap you will hit when you try to show angle brackets, the syntax-highlighter convention, and when not to use <code> at all.
Syntax
The <code> tag comes in pairs. The content is written between the opening (<code>) and closing (</code>) tags.
Example of the HTML <code> tag:
HTML <code> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Run the example above with the Try it editor: the <code> text sits on the same line as the surrounding paragraphs, rendered in a monospaced font, exactly like any other inline element.
Why <code> alone collapses whitespace
Like most HTML elements, <code> follows the normal whitespace rules: runs of spaces, tabs, and newlines are collapsed into a single space. That is fine for a single token (<code>let x = 10;</code>), but it falls apart the moment you paste a multi-line snippet:
<code>
function greet(name) {
return "Hello, " + name;
}
</code>In the browser this renders as one long line — function greet(name) { return "Hello, " + name; } — because every newline and the indentation are squashed down to single spaces.
To preserve line breaks and indentation, wrap the <code> in a <pre> ("preformatted") element. <pre> keeps whitespace exactly as written, and the <code> inside it keeps the semantic meaning. <pre><code>…</code></pre> is the standard pairing for any code block longer than one line.
Example of the HTML <code> tag placed inside an HTML <pre> tag:
Example of the HTML <code> tag inside an HTML <pre> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Escaping <, >, and & inside <code>
A very common task is to show HTML itself inside a <code> block — but the browser does not know your <div> is meant to be displayed rather than executed. If you write a literal < or >, the browser tries to parse it as a tag and your example silently disappears. The same goes for &, which starts a character reference.
You must replace those characters with their HTML entities:
| Character | Entity | Meaning |
|---|---|---|
< | < | less-than |
> | > | greater-than |
& | & | ampersand |
So to display the text <a href="#"> you actually write:
<code><a href="#"></code>And to show if (a && b):
<code>if (a && b)</code>Forgetting to escape & is the subtlest bug: © will render as the © symbol instead of the literal text. When in doubt, escape every <, >, and &.
Example of the HTML <code> tag with CSS properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>The language-* class for syntax highlighters
Plain <code> has no notion of which programming language it contains, so it can't color keywords, strings, and comments by itself. Syntax-highlighting libraries such as Prism and highlight.js solve this with a class-name convention: you add a language-<name> class to the <code> element (usually inside a <pre>), and the library scans the page, reads the class, and applies the right colors.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Here language-js tells the highlighter to treat the content as JavaScript. Other common values are language-css, language-html, and language-python. The class is purely informational for the highlighter — the <code> element still carries its semantic meaning even if no highlighter is loaded. (Note the => in the snippet above: even inside a highlighted block, you still escape > so the arrow function shows correctly.)
When not to use <code>
<code> is for content that is genuinely code. Don't use it just because you want a monospaced font:
- Keyboard input the user should press → use
<kbd>, e.g.<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Program output / sample results → use
<samp>. - A variable or placeholder in math or prose → use
<var>. - Purely decorative monospaced text with no code meaning → use a
<span>and style it with CSS. Reaching for<code>here is misleading to screen readers and search engines.
Choosing the right element keeps your markup honest: the tag describes what the text is, while CSS decides how it looks.
Related tags
<pre>— preserves whitespace; wrap<code>in it for multi-line blocks.<kbd>— keyboard input the user types.<samp>— sample output from a program.<var>— a variable or placeholder name.
Attributes
The <code> tag supports the Global Attributes and the Event Attributes.
For example, you can use the title attribute to add a tooltip: <code title="Variable declaration">let x = 10;</code>.