HTML Computer Code Elements

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.