HTML provides several elements for displaying computer code, programming instructions, keyboard input, and program output. These elements are useful when creating programming tutorials, technical documentation, coding blogs, and educational websites.

The most commonly used HTML code-related elements are <code>, <pre>, <kbd>, <samp>, and <var>. Each element has a specific purpose and helps browsers understand the type of technical content being displayed.

If you are new to HTML, you can first learn about HTML Elements and then use these code elements in your webpages.

The HTML <code> Element

The <code> element is used to display a short piece of computer code. Browsers normally display text inside <code> using a monospace font.

Example

<p>Use the <code>console.log()</code> function in JavaScript.</p>

The browser displays console.log() in a code-style font.

You can use <code> for HTML tags, CSS properties, JavaScript functions, SQL commands, or programming statements.

<p>The HTML <code>&lt;h1&gt;</code> element creates a main heading.</p>

The HTML <pre> Element

The <pre> element is used when you want to preserve spaces, line breaks, and formatting exactly as written in the HTML source.

It is commonly combined with <code> to display larger blocks of programming code.

Example

<pre>
<code>
function greet() {
    console.log("Hello World!");
}
</code>
</pre>

Unlike normal HTML text, the spaces and line breaks inside <pre> are preserved.

This makes <pre> useful for programming tutorials and documentation.

Combining <pre> and <code>

A common practice is to place <code> inside <pre> when displaying multiple lines of source code.

<pre>
<code>
<!DOCTYPE html>
<html>
<body>

<h1>Hello World</h1>

</body>
</html>
</code>
</pre>

The <pre> element controls the formatting, while <code> identifies the content as computer code.

For more information about the basic structure used in HTML examples, see HTML Document Structure.

The HTML <kbd> Element

The <kbd> element represents keyboard input. It is useful when explaining keyboard shortcuts or commands.

Example

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

It tells the browser that the text represents something the user should type or press on a keyboard.

You can also combine multiple <kbd> elements:

<p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>.</p>

The HTML <samp> Element

The <samp> element represents sample output from a computer program.

Example

<p>The program returned:</p>
<samp>Hello World!</samp>

It is useful for showing command-line output, error messages, or results generated by software.

The HTML <var> Element

The <var> element represents a variable in a mathematical expression or programming context.

Example

<p>The area is calculated using <var>w</var> × <var>h</var>.</p>

Here, w and h represent variables.

Styling HTML Code Elements

You can use CSS to customize the appearance of code elements.

<style>
code {
    background: #f1f5f9;
    padding: 3px 6px;
    border-radius: 4px;
}

pre {
    background: #111827;
    color: white;
    padding: 15px;
    border-radius: 8px;
}
</style>

CSS allows you to make code examples easier to read and visually separate them from normal content. You can learn more about applying CSS through HTML Styles.

Difference Between HTML Code Elements

The main code-related elements have different purposes:

Element	Purpose
<code>	Displays computer code
<pre>	Preserves spaces and line breaks
<kbd>	Represents keyboard input
<samp>	Represents program output
<var>	Represents a variable

Using the correct element gives your HTML more meaningful structure and makes technical content easier for browsers and users to understand.

When creating code examples, you can also use HTML Comments to explain sections of your source code without displaying those comments on the webpage.

Best Practices for HTML Code Elements

Use <code> for short inline programming examples and combine <pre> with <code> for multiline code blocks. Use <kbd> for keyboard shortcuts, <samp> for program output, and <var> for variables.

Avoid using these elements simply to change the visual appearance of text. Their main purpose is to provide semantic meaning to technical content.