**`<code>`** is an inline semantic element for short snippets of code — a function name, a variable, a single line of syntax — mentioned within a sentence. For multi-line code blocks where indentation and line breaks matter, it's combined with `<pre>` (`<pre><code>...</code></pre>`), since `<code>` alone doesn't preserve whitespace/line breaks the way `<pre>` does.
1Understanding <code>
`<code>` is an inline semantic element for short snippets of code — a function name, a variable, a single line of syntax — mentioned within a sentence. For multi-line code blocks where indentation and line breaks matter, it's combined with <pre> (<pre><code>...</code></pre>), since <code> alone doesn't preserve whitespace/line breaks the way <pre> does.
Syntax highlighters (like Prism.js or highlight.js, which power most code blocks on documentation sites) work by adding classes to spans inside a <code> element — the <code> tag itself is just the semantic + monospace baseline.
<p>Call <code>console.log()</code> to print to the console.</p>2Practical Example
Here is a real-world application of <code> showing how it is used in production HTML.
<!-- Multi-line code block -->
<pre><code>const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5</code></pre>3Best Practices
Follow these guidelines when working with <code>:
1. Use <code> for inline code fragments (function names, variables, short expressions)
2. Combine with <pre> for multi-line code blocks
3. Don't use <code> for user-facing sample output — use <samp> for that instead
Tip: Syntax highlighters (like Prism.js or highlight.js, which power most code blocks on documentation sites) work by adding classes to spans inside a <code> element — the <code> tag itself is just the semantic + monospace baseline.
<p>Call <code>console.log()</code> to print to the console.</p>