Home / HTML / Computercode

HTML Computercode

What are Computercode Elements?

HTML provides special elements for displaying computer code, program output, and user input. These elements help distinguish code from regular text and improve readability. They're typically rendered in monospace font and are useful for tutorials, documentation, and technical content.

Code Element

The <code> element is used to display inline code snippets. It's typically rendered in monospace font:

Example
<p>The HTML <code>&lt;code&gt;</code> element displays inline code.</p>
<p>Use <code>console.log()</code> to print to the console.</p>
<p>The CSS property <code>color</code> sets text color.</p>

Pre Element

The <pre> (preformatted) element displays text exactly as written, preserving spaces and line breaks. It's typically rendered in monospace font:

Example
<pre>
    This text preserves
    spaces    and
    line breaks.
</pre>

Pre with Code

Combining <pre> and <code> is common for displaying code blocks:

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

Kbd Element

The <kbd> (keyboard) element represents user input from a keyboard. It's typically rendered in monospace font:

Example
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Press <kbd>F5</kbd> to refresh the page.</p>
<p>Press <kbd>Enter</kbd> to submit the form.</p>

Samp Element

The <samp> (sample) element represents sample output from a computer program. It's typically rendered in monospace font:

Example
<p>Program output:</p>
<samp>
Hello, World!
The answer is 42.
</samp>

Var Element

The <var> (variable) element represents a variable in mathematical expressions or programming contexts:

Example
<p>The variable <var>x</var> equals 10.</p>
<p>In the equation <var>y</var> = <var>mx</var> + <var>b</var>, <var>m</var> is the slope.</p>
<p>The function uses <var>count</var> and <var>total</var> variables.</p>

Complete Example

Here's a complete example combining all computercode elements:

Example
<h2>HTML Tutorial</h2>
<p>To create a function in JavaScript, use the <code>function</code> keyword:</p>
<pre><code>
function greet() {
    var message = 'Hello';
    console.log(message);
}
</code></pre>
<p>When you press <kbd>F12</kbd> and run this code, the output will be:</p>
<samp>Hello</samp>
<p>The variable <var>message</var> stores the string value.</p>

Styling Computercode Elements

You can style computercode elements with CSS:

Example
<style>
    code {
        background-color: #f4f4f4;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        color: #c7254e;
    }
    pre {
        background-color: #f4f4f4;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #4b3190;
        overflow-x: auto;
    }
    kbd {
        background-color: #333;
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
    }
</style>
<p>Use <code>console.log()</code> to print.</p>
<pre><code>function example() { console.log('Hello'); }</code></pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Computercode Element Reference

Element Description Display
<code> Inline code snippet Monospace, inline
<pre> Preformatted text (preserves formatting) Monospace, block
<kbd> Keyboard input Monospace, inline
<samp> Sample program output Monospace, inline
<var> Variable in expressions Italic, inline

Best Practices

← HTML Head HTML Semantics →