HTML Computer Code Elements (original) (raw)

Last Updated : 19 Dec, 2024

HTML provides a set of **elements tailored for displaying **computer code so that it is easily distinguishable from other text on a webpage. These elements help in formatting and presenting source code in a readable and syntactically correct manner.

Table of Content

The code Tag
The kbd Tag
The pre Tag
The samp Tag
The var Tag

The code Tag

The `` 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 `` tag also supports both global attributes and event attributes, allowing for flexible styling and interaction.

**Syntax:

Computer code contents...

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

**Example: The tag displays a **C program within a

tag

, preserving whitespace and formatting. The C program includes the stdio.h library and a main function that prints “Hello Geeks”.

html `

         
            #include  
            int main() { 
                printf("Hello Geeks"); 
            }

**Output:

output

**The kbd Tag

The `` tag is used to define keyboard input. The text between the `` 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 `` tag has no specific attributes.

**Syntax:

****** Contents... ******

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

html `

The kbd tag Alt + Tab is used to switch between open apps

**Output:

Elements

Output

The pre Tag

The `

` 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 `

` element is displayed in a fixed-width font, but this can be changed using CSS. The `` tag requires both opening and closing tags.
**Syntax:
 Contents... 

**Example: To demonstrate implementing the 
 Tag in the HTML computer code elements.
html `




    pre tag with CSS
    



            GeeksforGeeks 
        A Computer  Science Portal  For Geeks 
    




` 
**Output: 

**The samp Tag
The `` 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:
 Contents... 
**Example: To demonstrate implementing the  tag in HTML to represent sample output or computer code snippets.
html `




    samp tag