HTML Computer code

In HTML there are various tags which help us to show output result, error message, or coding part to user on a webpage.

Contents hide
HTML <code> element
HTML <kbd> element
HTML <samp> element
HTML <var> element
HTML <pre> element
HTML Computer code Example

HTML <code> element

The HTML <code> element  is used to define a piece of computer code. It is used to display some programming code on website. The content written between <code>….</code> tag will be displayed in default monospace font.

Notice that the <code> element does not preserve extra whitespace and line-breaks. To fix this, you can put the <code> element inside a <pre> element.

HTML <kbd> element

It is used to represent user input, keyboard input, voice command etc. The content inside is displayed in the browser’s default monospace font.

HTML <samp> element

The <samp> tag is used to define sample output from a computer program. Text written within samp element is typically displayed in the browser’s default monospace font.

HTML <var> element

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

HTML <pre> element

The <pre> element defines preformatted text, which displays the content within it in a fixed-width font and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

HTML Computer code Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>HTML Computer code example</title>
</head>

<body>
    <h3>Define some text as computer code in a document:</h3>
    <code>
        x = 5;
        y = 6;
        z = x + y;
    </code>

    <p>Notice that the &lt;code&gt; element does not preserve extra whitespace and line-breaks. To fix this, you can put
        the &lt;code&gt; element inside a &lt;pre&gt; element:</p>
    <pre><code>
        x = 5;
        y = 6;
        z = x + y;
    </code></pre>

    <h3>HTML &lt;var&gt; For Variables</h3>
    <p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

    <h3>HTML &lt;kbd&gt; For Keyboard Input</h3>
    <p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
    <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

    <h3>HTML &lt;samp&gt; For Program Output</h3>
    <p>Message from my computer:</p>
    <p><samp>File not found.<br>Press F1 to continue</samp></p>

    <h3>Preformatted text:</h3>
    <pre>
        Text in a pre element
        is displayed in a fixed-width
        font, and it preserves
        both      spaces and
        line breaks
    </pre>
    
</body>

</html>
HTML Computer code Example Output