HTML computer code elements style source code, keyboard shortcuts, inline variables, and sample terminal output on web pages. You display technical code using <code>, <pre>, <kbd>, <samp>, and <var>.
HTML provides five specialized elements for technical code formatting:
<!-- Inline code snippet -->
<p>Use the <code>console.log()</code> method in JS.</p>
<!-- Formatted code block -->
<pre><code>function hello() {
return "World";
}</code></pre>
<!-- User keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<!-- Terminal sample output & variables -->
<p>Result: <samp>Error 404</samp></p>
<p>Equation: <var>x</var> + <var>y</var> = 10</p>
Code tag usages explained:
<code>: Marks inline programming fragments in fixed-width monospace font.<pre>: Preserves exact whitespace, line breaks, and indentation (used to wrap multi-line <code> blocks).<kbd>: Represents keyboard key inputs (e.g. <kbd>Enter</kbd>).<samp>: Displays sample computer program or terminal command line output.<var>: Formats mathematical variables or programming variables.flowchart TD
A["Technical Code Formatting"] --> B["code (Inline code text)"]
A --> C["pre -> code (Multi-line formatted block)"]
A --> D["kbd (Keyboard shortcuts: Ctrl+S)"]
A --> E["samp (Terminal command outputs)"]
A --> F["var (Mathematical / Code variables)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Computer Code Elements</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Terminal Instructions</h2>
<p>To start your dev server, press <kbd>Ctrl</kbd> + <kbd>`</kbd> and type <code>npm run dev</code>.</p>
<!-- Formatted multi-line code block -->
<pre style="background-color: #1e293b; color: #38bdf8; padding: 1.5rem; border-radius: 8px; font-family: monospace; overflow-x: auto;"><code>// JavaScript Function Example
function calculateTotal(price, tax) {
return price + (price * tax);
}</code></pre>
<p>Expected Output: <samp>Total: $108.00</samp></p>
</body>
</html>
<pre> with <code> for code blocks: <pre> preserves line breaks and tab spaces while <code> supplies semantic code meaning to browsers and accessibility tools.< with < and > with > so browsers render the code tags as visible text instead of parsing them as live HTML tags.overflow-x: auto to <pre> blocks: Prevents long code lines from breaking page layouts on narrow mobile screens by enabling horizontal code scrolling.Create a code snippet instructing users to press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run the function <code>saveDocument()</code>!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.