← Back to HTML Course | Chapter 3: Page Structure | Lesson 10 of 12

HTML Computercode

Imagine writing an email to a friend to explain a math formula or show them a line of computer code. If you paste it in as regular text, the browser will squash all your spacing, run the lines together, and make it look like a regular sentence. HTML computercode elements solve this formatting issue. They instruct the browser to isolate technical terms, commands, and code blocks using a clean, distinct layout. By using these elements, your code snippets, keyboard shortcuts, and terminal logs will display exactly as you typed them, formatted in a clean monospace font.

In this page:

  1. The code Tag
  2. Preformatted Code Blocks (pre and code)
  3. Styling Keyboard Inputs (kbd)
  4. Displaying Terminal Output (samp)
  5. Defining Variables in Code (var)
Syntax
markup 
<code>Inline code</code>
<pre><code>Preformatted code</code></pre>
<kbd>Keyboard input</kbd>

The code Tag

The code tag is used to display inline code snippets or technical keywords. It styles the text in a monospace font (like Courier) to distinguish it from surrounding body paragraphs.

Note: Use the code tag to format short programming terms, filenames, or properties inside a sentence.
Warning: The code tag is an inline element, meaning it will not preserve line breaks; use the pre tag for multi-line code blocks.

Example: The code Tag

markup 
<p>Run the <code>npm install</code> command.</p>

Preformatted Code Blocks (pre and code)

To display a multi-line code block with its original line breaks, indentation, and spaces preserved, you wrap your code element inside a pre (preformatted) tag.

Without the pre tag, the browser would collapse all your careful indentation and line breaks into a single line.

Note: Nest your code tag inside a pre tag to create clean, readable code blocks.
Warning: Ensure there are no blank lines or extra spaces right after your opening tags, as the browser will display them on your screen.

Example: Preformatted Code Blocks (pre and code)

markup 
<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

Styling Keyboard Inputs (kbd)

The kbd element is used to represent user keyboard inputs, such as command shortcuts or keys to press.

Browsers render the text inside kbd tags in a monospace font by default. This makes it easy to visually distinguish 'press Ctrl+S' instructions from regular body text.

Note: Apply simple border-radius and background styles to your kbd tags to make them look like physical keys on a keyboard.
Warning: Always write separate kbd tags for each key in a shortcut combination to keep your markup clean and legible.

Example: Styling Keyboard Inputs (kbd)

markup 
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Displaying Terminal Output (samp)

The samp tag is used to represent output data from a computer system, terminal program, or active script process, rendering the text in a monospace font by default.

This is commonly seen in tutorials that show a program's console output right below the code that produced it.

Note: Use the samp tag in your guides to show users the expected outcome of a terminal process.
Warning: Do not confuse samp with code, as samp represents output logs rather than written code scripts.

Example: Displaying Terminal Output (samp)

markup 
<p>The terminal displayed: <samp>Build successful</samp></p>

Defining Variables in Code (var)

The var tag is used to represent variables in mathematical formulas, code arguments, or technical equations. The browser displays the text in an italicized format by default.

This visual distinction helps readers immediately spot which parts of an example are placeholders versus fixed syntax.

Note: Use the var tag inside your mathematical formula layouts to make them look clean and professional.
Warning: Do not use the var tag as a replacement for standard italic styling tags like em, as var holds a highly technical meaning.

Example: Defining Variables in Code (var)

markup 
<p>The formula is <var>x</var> + <var>y</var> = 10</p>
Live Example
Related Topics

HTML Responsive · HTML Div · HTML Layout · HTML Buttons

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using the inline code tag alone to display multi-line code snippets, causing the formatting to break.
  2. Writing raw HTML tags (like ) inside code elements without escaping the brackets, which can crash your page layouts.
  3. Misusing kbd and samp as generic styling tags rather than as semantic technical notations.
Chapter Summary
  • The code tag styles inline technical terms, properties, and filenames in a monospace font.
  • To preserve line breaks and spacing inside multi-line code blocks, wrap your code tag inside a pre tag.
  • Use kbd to represent keyboard inputs, samp to display system output logs, and var to style technical variables.
Browser Support

Standard computercode tags and monospace styles are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Responsive Next Lesson → HTML Div

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.