In a technical tutorial, a sentence mentions the name of a function or a file in passing: "next, call fetch to get the data". That word gets lost in the sentence, with nothing to set it apart from the rest of the text even though it points to something very specific, a piece of code.
<code> solves that problem: it marks a fragment of computer code, as short as a function name or as long as an entire block, and displays it in a fixed-width font that sets it apart from the surrounding text right away.
Definition
<code> denotes a fragment of computer code: a variable name, a file name, a command, a bit of syntax, or a full code block. It is an inline element by default, meaning it sits within a sentence without starting a new block, unlike <pre>, which always forms a block of its own.
Syntax and inline use
Used alone, <code> makes a technical word stand out in the middle of an ordinary sentence, without changing anything about the structure of the text around it.
<p>Call the <code>fetch</code> function to get the data from the server.</p>For a longer snippet, the convention is to nest it inside a <pre>, which then takes care of preserving whitespace and line breaks while <code> keeps carrying the meaning: this is code.
<code> versus <kbd> and <samp>
Three tags look alike, all rendered in a fixed-width font, but they tell different stories. <code> stands for the code itself, as written or referenced. <kbd> stands for what the user types or a key they press. <samp> stands for what the program answers back.
| Tag | What it represents | Example |
|---|---|---|
<code> | The code itself, as reference | A function name inside a sentence |
<kbd> | What the user types or presses | A typed command, a keyboard shortcut |
<samp> | What the program answers | An output message, a displayed error |
A terminal transcript is a good illustration of all three roles together: the command the person typed, then the response the program sent back.
<pre>
<kbd>npm install</kbd>
<samp>added 42 packages in 3s</samp>
</pre>Syntax highlighting is not automatic
Adding a class such as language-html or language-python on <code> does not colour anything by itself.
The language-xxx class is a convention used by JavaScript syntax-highlighting libraries, such as Prism or highlight.js, to know which language to tokenise and colour. Without that script loaded on the page, the class stays a plain word sitting on the tag, with no visual effect from the browser alone. Highlighting is therefore an addition, never a native behaviour of <code>.
Best practices
Use <code> inline for any technical word mentioned in a sentence, and nested inside <pre> for a full block. Reserve it for genuinely computer-related content in the broad sense, file and command names included, rather than for a plain monospace styling effect a stylesheet can produce on its own without meaning anything.
Frequently asked questions
Can an inline snippet with <code> overflow if the sentence is long?
No, used alone and inline within a paragraph, <code> follows normal text behaviour: it wraps onto the next line like any other word. Only <pre> forces the absence of automatic wrapping, not <code> used on its own.
Should a language-xxx class be added even for a single code word inside a sentence?
Generally not, syntax highlighting mostly targets longer blocks inside a <pre>. A single word usually gets by with the default monospace font, with no particular colouring, so adding the class brings almost nothing there.
Can <code> be used for a file name or a command, not just for runnable code?
Yes, the definition broadly covers anything computer-related: file names, variable names, HTML tags, commands, not only formal source code written in a specific programming language.