HTML: Hypertext Markup Language | Computer Code Elements

Computer Code in HTML: HyperText Markup Language with Examples

{tocify} $title={Table of Contents}

Computer Code Elements

The computer has a unique formatting and text style for showing code-related messages. The <code> tag is utilised to show the computer code on the website. 

There are many elements available to mark up computer code using HTML.

<code> Tag 

The <code> tag in HTML represents the piece of computer code. 

While building web pages, occasionally, there is a need to display computer programming code. It could be accomplished by any basic heading tag of HTML, but HTML delivers a particular tag which is <code> tag.

The code tag is a specific type of text which describe computer output. HTML delivers many ways for text formatting, but <code> tag is shown with fixed letter size, font, and spacing.

Syntax: 

<code> Computer code contents... </code>{alertSuccess}
 

Example 1: 
 
<pre>
<code>
#include<stdio.h>
int main() {
    printf("Hello A.T");
}
</code>
</pre>{codeBox}

Example 2: 
 
<pre>
<code>
class AT
    // Program begins with a call to main()
    // Print "Hello, World" to the terminal window 
    public static void main(String args[]) 
    { 
        System.out.println("Hello, World"); 
    } 
</code>
</pre>{codeBox}

Note: The program written inside the <code> tag has different font sizes and font types to the basic heading tag and paragraph tag. <pre> tag is utilised to show code snippets because it consistently keeps the text formatting as it is.{alertError}

Some points about <code> tag: 

  • It is mostly utilised to show the code snippet in the web browser.
  • This tag styles its element to match the computer’s default text format.
  • The web browsers, by default, use a monospace font family for showing <code> tags element content

<kbd> Tag

It is a phrase tag & utilised to define the keyboard input. The text between the <kbd> tag symbolises similar text that should be typed on the keyboard.

Syntax: 

<kbd> Contents... </kbd>{alertSuccess}

Example: 
 
<!DOCTYPE html>
<html>

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

<body>
<div class="AT">AKASHTIMES</div> 
<kbd>A computer</kbd> 
<kbd>science</kbd> 
<kbd>portal</kbd> 

</body>
</html>{codeBox}

Some points about <kbd> tag: 

  • The text enclosed by <kbd> tag is typically shown in the browser’s default mono-space font.
  • It is likely to achieve a more prosperous effect with CSS
  • There are no tag-specific attributes.

<pre> Tag

The <pre> tag in HTML is utilised to determine the block of preformatted text, which keeps the text spaces, line breaks, tabs, and other formatting characters neglected by web browsers. 

Text in the <pre> element is shown in a fixed-width font, but it can be modified using CSS. The <pre> tag needs a starting and end tag.

Syntax:  

<pre> Contents... </pre>{alertSuccess}

Example .1: 
 
<!DOCTYPE html>
<html>

<head>
<title>pre tag</title>
</head>

<body> 

<pre>
    // Program begins with a call to main()
    // Print "Hello, World" to the terminal window 
    public static void main(String args[]) 
    { 
        System.out.println("Hello, World"); 
    } 
}

        </pre> 

</body>
</html>{codeBox}

Example .2: 
 
<!DOCTYPE html>
<html>

<head>

       <title>pre tag with CSS</title>

        <style>
            pre {
                font-family: Arial;
                color: #009910;
                margin: 25px;
            }
        </style>

<body> 

<pre>
    // Program begins with a call to main()
    // Print "Hello, World" to the terminal window 
    public static void main(String args[]) 
    { 
        System.out.println("Hello, World"); 
    } 
}

        </pre> 

</body>
</html>{codeBox}

<samp> Tag 

It is a phrase tag & utilised to determine the sample output text from a computer program. The HTML Sample Element is utilised to enclose inline text, representing sample (or quoted) output from a computer program.

Syntax: 

<samp> Contents... </samp>{alertSuccess}

Example: 
 
<!DOCTYPE html>
<html>

<head>
<title>samp tag</title>
</head>

<style>
body {
text-align: center;
}

.AT {
font-size: 40px;
font-weight: bold;
color: green;
}

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

<body>
<div class="AT">GeeksForGeeks</div>

<div class="AKASHTIMES"><samp> Tag</div>

        <samp>A computer science portal for Geeks</samp> 

</body>
</html>{codeBox}

<var> Tag

It is a phrase tag & utilised to determine the variable in a mathematical equation or in a computer program. The content of this tag is shown in an italic format in most browsers.

Syntax: 

<var> Contents... </var>{alertSuccess}

Chapter Summary

  • The <kbd> element represents the keyboard input
  • The <samp> element represents sample output from a computer program
  • The <code> element represents a piece of computer code
  • The <var> element describes a variable in programming or in a mathematical expression
  • The <pre> element represents preformatted text

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML Computer Code Elements.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

To be published, comments must be reviewed by the administrator.*

Previous Post Next Post