HTML
HTML Computer Code Elements
HTML provides a suite of semantic elements for marking up code-related content, making it more readable, accessible, and easier to style. In this tutorial you’ll learn how to use five key elements—<code>, <kbd>, <pre>, <samp>, and <var>—to enhance your HTML documents.
Learning Outcomes
After completing this tutorial, you will be able to:
- Choose the right element (
<code>,<kbd>,<pre>,<samp>,<var>) for code, input, or output. - Preserve multi-line formatting with
<pre>and inline styling with<code>. - Document keyboard shortcuts accessibly using
<kbd>. - Show program or device responses via
<samp>. - Highlight variables and expressions using
<var>.
Overview of Computer Code Elements
| Element | Purpose |
|---|---|
<code> |
Marks up inline code snippets |
<kbd> |
Denotes keyboard input (keys or key combos) |
<pre> |
Preserves whitespace & line breaks for blocks |
<samp> |
Represents sample program or device output |
<var> |
Highlights variables or placeholders |
HTML Element
The <code> element is for short fragments of computer code within a sentence or paragraph. Browsers render it in a monospace font, and you can target it with CSS for custom styling. Use <code> to mark up short fragments of code within a sentence or paragraph—for example, CSS declarations, JavaScript methods, or template syntax.
Syntax
<code>yourCodeHere()</code>
Notes:
- Does not preserve multiple lines or extra spacing.
- Always escape
< and > inside the tag (< and >).
- You can nest
<code> inside <pre> for multi-line blocks.
Example:
<p>
To add a CSS transition, use
<code>transition: all 0.3s ease;</code>
on your selector.
</p>
Output:
To add a CSS transition, use
transition: all 0.3s ease;
on your selector.
HTML <kbd> Element
Use <kbd> to show keys or key combinations that users should press. It’s ideal for documenting shortcuts or any interaction requiring keyboard input.
Syntax
<kbd>Key</kbd>
Notes:
- Combine multiple
<kbd> elements for sequences: <kbd>Ctrl</kbd> + <kbd>C</kbd>.
- Screen readers announce these as “keyboard” roles, improving accessibility.
Example:
<p>
To open DevTools in Chrome, press
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>.
</p>
Output:
To open DevTools in Chrome, press
Ctrl + Shift + I.
HTML <pre> Element
The <pre> element displays text exactly as written—spaces, tabs, and line breaks are all honored. Use it for larger blocks of code or ASCII art.
Syntax
<pre>
// lines of code or text
</pre>
Notes:
Preserves all spaces, tabs, and line breaks exactly.
Often paired with <code> for syntax styling:
<pre><code>…</code></pre>
Can be styled with CSS to change fonts or add scrollbars.
Example:
<pre><code>
function calculateArea(width, height) {
return width * height;
}
</code></pre>
Output:
function calculateArea(width, height) {
return width * height;
}
HTML <samp> Element
When you want to show what a program or device outputs, wrap that text in <samp>. It visually distinguishes sample responses from regular prose.
Syntax
<samp>Sample output text</samp>
Notes:
- Inline by default; wrap in a block-level container if needed (
<p>, <div>).
- Screen readers treat it as ordinary text but you can add an ARIA role if desired.
Example:
<p>Server response:</p>
<p><samp>404 Not Found</samp></p>
Output:
Server response:
404 Not Found
HTML <var> Element
Use <var> for variables in code examples or mathematical expressions. By default browsers render it in italics.
Syntax
<var>variableName</var>
Notes:
- Browsers render
<var> in italics by default.
- Semantically distinct from
<em> or <i>; conveys programming/math context.
Example:
<p>
The total width is
<var>100%</var>
of the container.
</p>
Output:
The total width is
100%
of the container.
Supported Browsers
All modern browsers fully support these elements:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
FAQs on HTML Computer Code Elements
Can I nest <code> inside <pre>?
Yes—you’ll often wrap <code> within <pre> to preserve formatting for multi-line code blocks while keeping semantic clarity.
Do HTML Computer Code Elements accept classes or IDs for styling?
Absolutely. All five tags support global attributes (class, id, data-*, etc.), so you can target them in your CSS or JavaScript.
Should I use <samp> or <code> for output?
Use <samp> when illustrating program or device output; reserve <code> for the code itself. This separation improves accessibility and makes styling more precise.