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: