Last Updated : 11 Jul, 2025
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.
The code TagThe `<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 Geeks".
html
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
#include <stdio.h>
int main() {
printf("Hello Geeks");
}
</code>
</pre>
</body>
</html>
Output:
The kbd TagThe `<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 TagThe `<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>
GeeksforGeeks
A Computer Science Portal For Geeks
</pre>
</body>
</html>
Output:
The samp TagThe `<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;
}
.geeks {
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="geeks"><samp> Tag</div>
<samp>A computer science portal for Geeks</samp>
</body>
</html>
Output:
Output The var TagThe <var> tag is used specifically to highlight programming variables or mathematical expressions, providing context to the text, which is useful for accessibility and search engines. 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;
}
.geeks {
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="geeks"><var> Tag</div>
<var>GeeksforGeeks Variable</var>
</body>
</html>
Output:
Output Quick Summary: 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. Supported Browsers
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4