HTML Computer Code Elements

The computer has a unique formatting and text style for displaying the messages related to codes. There are several elements available to mark up computer code elements using HTML which are as follows:

Table of Content

The code Tag
The kbd Tag
The pre Tag
The samp Tag
The var Tag
HTML Computer Code Elements
Supported Browsers

The `<code>` tag in HTML is designed to display computer code snippets with fixed formatting for optimal readability. It renders the code in a monospace font, preserving the original spacing and layout. The `<code>` tag also supports both global attributes and event attributes, allowing for flexible styling and interaction.

Syntax:

<code> Computer code contents... </code>

Note: The program that is written inside the <code> tag has some different font sizes and font types to the basic heading tag and paragraph tag.

Example: The <code> tag displays a C program within a <pre> tag, preserving whitespace and formatting. The C program includes the stdio.h library and a main function that prints “Hello Beginner”.

html

<!DOCTYPE html>
<html>

<body>
    <pre>
        <code> 
            #include &lt;stdio.h&gt; 
            int main() { 
                printf("Hello Beginner"); 
            } 
        </code> 
    </pre>
</body>

</html>

Output:

The `<kbd>` tag is used to define keyboard input. The text between the `<kbd>` tags represents text that should be typed on a keyboard. This text is typically displayed in the browser’s default monospace font, though a richer effect can be achieved with CSS. The `<kbd>` tag has no specific attributes.

Syntax:

<kbd> Contents... </kbd>

Example: To demonstrate the implementation of the <kbd> Tag. The <kbd> tag displays keyboard keys “Alt”, “+”, and “Tab” within the styled text.

html

<!DOCTYPE html>
<html>

<head>
    <title>The kbd tag</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <kbd>Alt </kbd>
    <kbd>+</kbd>
    <kbd>Tab</kbd>
    <span>
        is used to switch between open apps
    </span>
</body>

</html>

Output:

Output

The `<pre>` tag in HTML defines a block of preformatted text, preserving spaces, line breaks, tabs, and other formatting characters that browsers usually ignore. Text within the `<pre>` element is displayed in a fixed-width font, but this can be changed using CSS. The `<pre>` tag requires both opening and closing tags.

Syntax:

<pre> Contents... </pre>

Example: To demonstrate implementing the <pre> Tag in the HTML computer code elements.

html

<!DOCTYPE html>
<html>

<head>
    <title>pre tag with CSS</title>
    <style>
        pre {
            font-family: Arial;
            color: #009900;
            margin: 25px;
        }
    </style>
</head>

<body>
    <pre>
        w3wiki 
        A Computer  Science Portal  For Beginner 
    </pre>
</body>

</html>

Output:

The `<samp>` tag is used to define sample output from a computer program. It encloses inline text representing a sample or quoted output from a program.

Syntax:

<samp> Contents... </samp>

Example: To demonstrate implementing the <samp> tag in HTML to represent sample output or computer code snippets.

html

<!DOCTYPE html>
<html>

<head>
    <title>samp tag</title>
    <style>
        body {
            text-align: center;
        }

        .Beginner {
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="Beginner">&lt;samp&gt; Tag</div>
    <samp>A computer science portal for Beginner</samp>
</body>

</html>

Output:

Output

The `<var>` tag is used to specify a variable in a mathematical equation or a computer program. In most browsers, the content of this tag is displayed in italic format.

Syntax:

<var> Contents... </var>

Example: To demonstrate using the <var> tag in HTML that denotes variables and it is styled to differentiate them from regular text, providing emphasis on their significance within the content.

html

<!DOCTYPE html>
<html>

<head>
    <title>var tag</title>
    <style>
        body {
            text-align: center;
        }

        .Beginner {
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="Beginner">&lt;var&gt; Tag</div>
    <var>w3wiki Variable</var>
</body>

</html>

Output:

Output

The table below shows the HTML Computer Code Tags with their description:

Tag	Description
`<code>`	Defines a piece of computer code.
`<kbd>`	Represents keyboard input, often used to display keys or key combinations.
`<pre>`	Displays preformatted text, maintaining its original formatting.
`<samp>`	Displays sample output or examples, typically used in computing contexts.
`<var>`	Denotes variables, often used to represent placeholders or program entities.

Google Chrome
Microsoft Edge
Firefox
Opera
Safari

The code Tag

Syntax:

The kbd Tag

Syntax:

The pre Tag

Syntax:

The samp Tag

Syntax:

The var Tag

Syntax:

HTML Computer Code Elements

Supported Browsers

Contact Us