worldofitech
HTML Computer Code Elements: HTML contains a few elements for defining user input and computer code.
At the point when we are programming, now and then it is mandatory to show the Output result, error message, or coding part to user on a site page. Subsequently to address this issue HTML uses various tags for the user inputs, codes, programs, and so forth With the assistance of these tags, you will actually want to write codes to show on your website page.
Following is a rundown of certain tags which are used in HTML for this task.
<code>
<kbd>
<samp>
<var>
<pre>
Example
<!DOCTYPE html> <html> <body> <h2>Computer Code</h2> <p>Some programming code:</p> <code> x = 5; y = 6; z = x + y; </code> </body> </html>
In this tutorial, you will learn-
In this article, you will learn-
HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The substance inside is shown in the browser’s default monospace text style.
Example
Define some text as keyboard input in a document:
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
Result:
Save the document by pressing Ctrl + S
HTML <samp> For Program Output
The HTML <samp> element is used to define sample output from a computer program. The substance inside is shown in the browser’s default monospace text style.
Example
Define some text as sample output from a computer program in a document:
<p>Message from my computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p>
Result:
Message from my computer: File not found. Press F1 to continue
HTML <code> For Computer Code
The HTML <code> element is used to define a piece of computer code. The substance inside is shown in the browser’s default monospace text style.
Example
Define some text as computer code in a document:
<code> x = 5; y = 6; z = x + y; </code>
Result:
x = 5; y = 6; z = x + y;
Notice that the <code> element doesn’t preserve extra whitespace and line-breaks.
To fix this, you can put the <code> element inside a <pre> element:
Example
<pre> <code> x = 5; y = 6; z = x + y; </code> </pre>
Result:
x = 5; y = 6; z = x + y;
HTML <var> For Variables
The HTML <var> element is used to define a variable in programming or in a mathematical expression. The substance inside is normally shown in italic.
Example
Define some text as variables in a document:
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
Result:
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
Chapter Summary
- The <kbd> element defines keyboard input
- The <samp> element defines sample output from a computer program
- The <code> element defines a piece of computer code
- The <var> element defines a variable in programming or in a mathematical expression
- The <pre> element defines preformatted text
HTML Computer Code Elements
| Tag | Description |
| <code> | Defines programming code |
| <kbd> | Defines keyboard input |
| <samp> | Defines computer output |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
HTML Layout Elements and Techniques
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.
