HTML Computer Code Elements
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 `<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”.
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
#include <stdio.h>
int main() {
printf("Hello Geeks");
}
</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:
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>
GeeksforGeeks
A Computer Science Portal For Geeks
</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;
}
.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 Tag
The <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.
<!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
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
HTML Computer Code Elements – FAQs
What are HTML code elements?
HTML code elements are used to display computer code or programming snippets in a web page, typically rendered in a monospaced font to distinguish them from regular text.
What does the <code> element do?
The <code> element represents a fragment of computer code. It’s used within other elements like <pre> or <samp> to format code snippets.
What is the use of the <pre> element?
The <pre> element displays preformatted text with preserved whitespace and line breaks, often used to present code blocks in a readable format.
How to include code comments in HTML?
Use HTML comments with <!– comment –> for notes or explanations in the HTML source code, which are not visible in the rendered page.
What is the <samp> element used for?
The <samp> element represents sample output from a program or command. It’s often used to display results from code execution.
How to highlight syntax in code?
Syntax highlighting is typically done with JavaScript libraries like Prism or Highlight.js, or using server-side tools to format and colorize code before rendering.
