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
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”.
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
#include <stdio.h>
int main() {
printf("Hello Beginner");
}
</code>
</pre>
</body>
</html>
Output:
The kbd Tag
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.
<!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:
The pre Tag
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.
<!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
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.
<!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"><samp> Tag</div>
<samp>A computer science portal for Beginner</samp>
</body>
</html>
Output:
The var Tag
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.
<!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"><var> Tag</div>
<var>w3wiki Variable</var>
</body>
</html>
Output:
HTML Computer Code Elements
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. |
Supported Browsers
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari