HTML Computer Code Elements

Master specialized markup for presenting programming syntax, user input notation, and software output

HTML incorporates dedicated elements tailored for rendering programming code samples, syntax snippets, keyboard command notation, terminal output, and variable identifiers. These tags maintain formatting integrity while conveying semantic significance for technical documentation.

HTML <code> Element

The <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Example - Inline Code

<p>The HTML <code>button</code> element defines a clickable button.</p>

<p>Use the CSS <code>background-color</code> property to change background color.</p>

Result:

The HTML button element defines a clickable button.

Note: The <code> element does not preserve extra whitespace and line breaks. To preserve formatting, wrap the <code> element inside a <pre> element.

HTML <kbd> Element

The <kbd> element is used to define keyboard input. The content inside is typically displayed in the browser's default monospace font.

Example - Keyboard Input

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

<p>To refresh the page, press <kbd>F5</kbd> or <kbd>Ctrl</kbd> + <kbd>R</kbd>.</p>

Result:

Press Ctrl + C to copy text.

HTML <samp> Element

The <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Example - Program Output

<p>If you get an error, it might look like this:</p>
<p><samp>Error: File not found.<br>Press F1 to continue</samp></p>

<p>Message from the system:</p>
<p><samp>Server started successfully on port 3000</samp></p>

Result:

Message from the system:

Server started successfully on port 3000

HTML <var> Element

The <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example - Variables

<p>The area of a triangle is: <var>A</var> = 1/2 × <var>b</var> × <var>h</var></p>

<p>Einstein's equation: <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>

<p>The value of <var>x</var> is 10 and <var>y</var> is 20.</p>

Result:

The area of a triangle is: A = 1/2 × b × h

HTML <pre> Element

The <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font, and it preserves both spaces and line breaks.

Example - Preformatted Text

<pre>
Text in a pre element
is displayed in a fixed-width font,
and it preserves
both      spaces and
line breaks.
</pre>

Result:

Text in a pre element
is displayed in a fixed-width font,
and it preserves
both      spaces and
line breaks.

Combining Code Elements

For displaying multi-line code blocks with proper formatting, combine <pre> and <code> elements:

Example - Code Block

<pre><code>
function greeting(name) {
    return "Hello, " + name + "!";
}

console.log(greeting("World"));
</code></pre>

Result:

function greeting(name) {
    return "Hello, " + name + "!";
}

console.log(greeting("World"));

Displaying HTML Code

When displaying HTML code, you must use HTML entities for special characters like < and >:

Common HTML Entities

  • &lt; displays as < (less than)
  • &gt; displays as > (greater than)
  • &amp; displays as & (ampersand)
  • &quot; displays as " (quotation mark)

Example - Displaying HTML Tags

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;My Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

Result:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Practical Examples

Example 1: Documentation with Code

Example - Technical Documentation

<h2>Installation Instructions</h2>

<p>To install the package, run the following command:</p>
<pre><code>npm install my-package</code></pre>

<p>Import the module in your code:</p>
<pre><code>const myPackage = require('my-package');</code></pre>

Example 2: Terminal Commands

Example - Command Line Instructions

<p>Open your terminal and type:</p>
<pre><code>$ cd my-project
$ npm start</code></pre>

<p>Output:</p>
<samp>Starting development server...
Server is running on http://localhost:3000</samp>

Example 3: Error Messages

Example - Error Display

<p>If you see this error:</p>
<pre><samp>
TypeError: Cannot read property 'length' of undefined
    at processData (app.js:42)
    at main (app.js:15)
</samp></pre>

<p>Check that the <var>data</var> variable is defined.</p>

Example 4: Keyboard Shortcuts Guide

Example - Shortcuts Documentation

<h3>Keyboard Shortcuts</h3>
<ul>
    <li><kbd>Ctrl</kbd> + <kbd>C</kbd> - Copy</li>
    <li><kbd>Ctrl</kbd> + <kbd>V</kbd> - Paste</li>
    <li><kbd>Ctrl</kbd> + <kbd>Z</kbd> - Undo</li>
    <li><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> - Redo</li>
</ul>

Computer Code Elements Summary

Quick Reference

Element Purpose Display
<code> Computer code Monospace font
<kbd> Keyboard input Monospace font
<samp> Program output Monospace font
<var> Variable Italic
<pre> Preformatted text Preserves whitespace

Best Practices

✓ Tips for Using Code Elements

  • Use <code> for inline code snippets
  • Combine <pre> and <code> for multi-line code blocks
  • Use <kbd> for keyboard shortcuts and user input
  • Use <samp> for program output and system messages
  • Use <var> for mathematical or programming variables
  • Always use HTML entities when displaying HTML code
  • Consider using syntax highlighting libraries for better code presentation
  • Add proper semantic meaning to help screen readers

Test Your Knowledge