Showing Code in HTML

Display code snippets, keyboard shortcuts, program output and variables correctly with code, pre, kbd, samp and var, and escape special characters.

Lesson 10 of 44Beginner15 min read

Tutorials, documentation, developer blogs and help pages all need to show code on a web page: a command to type, a line of JavaScript, a keyboard shortcut, or the message a program prints. HTML has a small family of elements for exactly this, and using them makes technical content much clearer for readers.

The two you'll use most are <code>, which marks a fragment of computer code, and <pre>, which keeps spaces and line breaks exactly as you typed them. Normally HTML collapses any run of spaces and new lines into a single space, which would destroy the indentation of a code sample. <pre> switches that off.

Three smaller elements complete the set: <kbd> for keys the user should press, <samp> for output from a program, and <var> for variables in maths or code. You'll also learn how to show HTML tags themselves on a page, which needs character entities so the browser doesn't treat them as real tags.

Inline code and code blocks

HTML
<p>Use the <code>console.log()</code> function to print values.</p>

<pre><code>function greet(name) {
  return "Hello, " + name;
}</code></pre>
  • <code> on its own is for short code inside a sentence. Browsers show it in a monospace font.
  • <pre> preserves whitespace: spaces, tabs and line breaks appear exactly as written, also in a monospace font.
  • The standard pattern for a code block is <pre><code>...</code></pre>: <pre> keeps the layout and <code> says the content is code. Syntax highlighters, like the one on this site, look for this pattern.
  • Long lines inside <pre> don't wrap; add CSS such as overflow-x: auto so they scroll inside their box on small screens.

kbd, samp and var

ElementMeaningExample
<kbd>Keyboard input the user types or pressesPress <kbd>Ctrl</kbd> + <kbd>S</kbd>
<samp>Sample output from a program<samp>File saved.</samp>
<var>A variable in maths or programmingthe area is <var>w</var> × <var>h</var>

You can nest <kbd> elements for key combinations, as in <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>, and style them like little keys with CSS.

Showing HTML tags as text

If you write <p> inside your page, the browser creates a paragraph instead of showing the characters. To display tags as text, replace the angle brackets with entities:

  • &lt; shows <
  • &gt; shows >
  • &amp; shows &

So <code>&lt;h1&gt;</code> displays as <h1> in a code font. Inside <pre> the same rule applies, so every < in a block of HTML code must be written as &lt;. Build tools and content systems usually do this escaping for you.

HTML Code Elements Syntax

Code elements

<p>Run <code>npm install</code> first.</p>
<pre><code>let total = 0;
for (const n of [1, 2, 3]) total += n;</code></pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to undo.</p>
<p>The program prints <samp>Done!</samp></p>
<p>Speed equals <var>d</var> / <var>t</var>.</p>
<p>A paragraph starts with <code>&lt;p&gt;</code>.</p>

HTML Code Elements Summary

  • <code> marks code inside text; <pre> preserves spaces and line breaks.
  • Use <pre><code> for multi-line code blocks.
  • <kbd> is keyboard input, <samp> is program output and <var> is a variable.
  • Show HTML tags as text with &lt;, &gt; and &amp;.
  • Let wide code blocks scroll with overflow-x: auto instead of overflowing the page.

HTML Code Elements Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A documentation snippet

<h3>Install the package</h3>
<p>Open a terminal and run <code>npm install chart-lite</code>, then add this:</p>
<pre><code>import { drawChart } from "chart-lite";

drawChart("#sales", {
  type: "bar",
  data: [12, 19, 7]
});</code></pre>
<p>If it worked, the console shows <samp>Chart drawn in 4ms</samp>.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2Inline <code> for a short command inside a sentence.
  2. Lines 3 to 8A code block keeps the blank line and the two-space indentation exactly as written.
  3. Line 9<samp> marks the message the program prints.
Example 2

Keyboard shortcuts styled as keys

<style>
  kbd {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #b9bfca;
    border-bottom-width: 3px;
    border-radius: 6px;
    background: #f6f7f9;
    font-size: 0.85em;
  }
</style>
<ul>
  <li>Copy: <kbd>Ctrl</kbd> + <kbd>C</kbd></li>
  <li>Paste: <kbd>Ctrl</kbd> + <kbd>V</kbd></li>
  <li>Save: <kbd>Ctrl</kbd> + <kbd>S</kbd> (or <kbd>Cmd</kbd> + <kbd>S</kbd> on a Mac)</li>
</ul>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 10A little CSS makes each <kbd> look like a key, with a thicker bottom edge.
  2. Lines 13 to 15Each key gets its own <kbd>, joined by plus signs.
Example 3

Showing HTML code as text

<p>To make a link, use the <code>&lt;a&gt;</code> element:</p>
<pre><code>&lt;a href="https://example.com"&gt;Visit Example&lt;/a&gt;</code></pre>
<p>Remember: <var>width</var> × <var>height</var> gives the area of an image in pixels.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1&lt;a&gt; shows the characters <a> instead of creating a link.
  2. Line 2Every angle bracket in the code sample is written as an entity.
  3. Line 3<var> marks the names in a formula, usually shown in italics.

Common HTML Code Elements Mistakes

Code block without pre

Don't
<code>
if (ready) {
  start();
}
</code>
Do
<pre><code>if (ready) {
  start();
}</code></pre>

Without <pre>, the line breaks and indentation collapse into one long line.

Unescaped tags inside code

Don't
<code><button></code>
Do
<code>&lt;button&gt;</code>

The first version creates a real button instead of showing the text.

Using pre for layout

Don't
<pre>Name:      Ada
Role:      Engineer</pre>
Do
<dl><dt>Name</dt><dd>Ada</dd><dt>Role</dt><dd>Engineer</dd></dl>

Lining things up with spaces breaks on small screens and confuses screen readers. Use proper elements and CSS for layout.

HTML Code Elements in Real Projects

Where these elements appear

Documentation sites such as MDN, coding blogs, README files rendered on GitHub, help centres showing keyboard shortcuts, and every lesson on Codevra. Markdown converts backticks into <code> and fenced blocks into <pre><code>, so you're using these elements whenever you write Markdown.

HTML Code Elements Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the markup for a multi-line code block.

<><code>let a = 1;
let b = 2;</code></>
Multiple choiceeasy

Which element marks a key the user should press?

Multiple choicemedium

What does <pre> change?

Multiple choicemedium

How do you display the text <div> on a page?

Fix the bugmedium

The code sample lost its indentation and the shortcut isn't marked up. Wrap the code in <pre><code> and put each key in its own <kbd>.

<p>Save with Ctrl + S.</p>
<code>
for (let i = 0; i < 3; i++) {
  console.log(i);
}
</code>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The code is inside pre > code
  • Two kbd elements for the shortcut
  • The indentation is kept

HTML Code Elements Quiz

5 questions to check what you learned.

  1. Which element is used for short code inside a sentence?

    • code
    • pre
    • samp
    • script

  2. What does <samp> represent?

    • Sample images
    • A code comment
    • Output from a program
    • A keyboard key

  3. What is the standard markup for a block of code?

    • <code><pre>
    • <block>
    • <script>
    • <pre><code>

  4. Which entity displays a less-than sign?

    • &lt;
    • &gt;
    • &amp;
    • &less;

  5. Why add overflow-x: auto to code blocks?

    • To hide long lines
    • So long lines scroll inside the block instead of widening the whole page on phones
    • To add syntax colours
    • To wrap every line

HTML Code Elements Challenge

A help card

Build a small help card:

  1. A paragraph containing a <kbd> for Ctrl and a <kbd> for P
  2. A <pre><code> block with at least two lines
  3. A <samp> showing the result message
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • At least two kbd elements
  • A pre > code block with two or more lines
  • A samp element

Related HTML topics

08Text FormattingBold, italic, highlighted, deleted and code text, chosen for meaning.30Entities & SymbolsShow reserved characters like < and &, special symbols and emoji.09Quotes & CitationsMark up quotes, sources, abbreviations and contact details with the right HTML elements so browsers, search engines and screen readers understand them.
Esc
↑↓ to navigateEnter to open