Follow The New Tutorial updates on WhatsApp, Telegram or YouTube.

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.

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