<code> Inline code
A fragment of computer code, set in a monospace font.
<code> marks a short piece of computer code inside text, such as a tag name, a file name, a command or a property. Browsers use a monospace font.
Multi-line code blocks go inside <pre> so the spacing survives. Tags still work inside code, which means angle brackets have to be written < and >. Keyboard keys get <kbd>; program output gets <samp>.
The code element in the HTML Living Standard (opens in a new tab) suggests a class such as language-html to record the language. Practise it in the Quotes and Code lesson.
Syntax
<code>fragment</code>When to use it
Wrap <code> around any short piece of computer text inside a sentence: an element or attribute name in a tutorial, a CSS property, a file name such as style.css, a function name in API docs, or a short command. For several lines, wrap it in pre as well, so spacing and line breaks survive.
Its relatives split the job: what a user types is kbd, what a program prints is samp, and a placeholder or variable name in prose is var. Pick the one that matches who produces the text.
Phones bring their own problem. Long code strings such as file paths or class names have no spaces, so browsers cannot wrap them and the text runs off the screen. Add overflow-wrap:anywhere to code inside paragraphs, or place <wbr> at sensible break points. For code blocks in pre, set overflow-x:auto so long lines scroll inside the block instead of widening the page.
Live example
Edit the code and watch the preview.
<p>Use the <code><img></code> tag with an <code>alt</code> attribute.</p>
<p>Open <code>index.html</code> in your browser.</p>More examples
Code block with a language class
A multi-line code sample goes in pre plus code. The class follows the convention from the standard, so a syntax highlighter or your CSS can tell which language the code is in.
<p>Add this rule to <code>style.css</code>:</p>
<pre style="background:#f4f4f4;padding:12px;overflow-x:auto"><code class="language-css">p {
color: navy;
line-height: 1.5;
}</code></pre>Long code in a narrow column
Long file paths and identifiers have no spaces, so they overflow narrow boxes. With overflow-wrap:anywhere, the browser may break them at any character when it has to. The narrow box imitates a phone screen.
<p style="width:180px;border:1px solid #ccc;padding:8px">Edit <code style="overflow-wrap:anywhere">src/components/navigation/MainNavigationMenu.html</code> to change the links.</p>Tip: Inside code, write < as < and > as >.
Browser support
code has been part of HTML since version 2.0 and works in every browser, rendered in a monospace font. The overflow-wrap:anywhere value used to wrap long code is supported in all current browsers; Safari added it in version 15.4, and overflow-wrap:break-word is a close fallback for older browsers.
Accessibility
Screen readers read code like any other text. Give long code blocks a caption that says what the code does, and make scrollable blocks keyboard-reachable with tabindex="0". Why scrollable areas have to be reachable is covered in the W3C note Understanding Keyboard (opens in a new tab).
Common mistakes
Wrong
<code><div></code>Right
<code><div></code>Unless you escape the < and > characters, tags inside code are parsed as real markup.
Frequently asked questions
What is the difference between code and pre?
<code> says the content is computer code: an element name, a file name, a snippet. It is inline and does not preserve line breaks. <pre> keeps whitespace and line breaks. A multi-line code block uses both, nested: <pre><code>...</code></pre>. Preformatted blocks have their own pre element page.
How do I indicate the programming language in a code tag?
HTML has no attribute for it. The standard suggests a class with the language- prefix instead, such as <code class="language-css">, and syntax highlighters like Prism and highlight.js pick up on that convention. Human readers need it too, so name the language in the surrounding text or a caption.
Practise it
- Quotes and Code (Module 2: Text)