Back to: HTML Tutorials
Computer Code Elements in HTML with Examples
In this article, I am going to discuss Computer Code Elements in HTML with Examples. Please read our previous article where we discussed Entities in HTML with Examples. At the end of this article, you will learn everything about HTML Computer Code Elements with Examples.
Computer Code Elements in HTML
Sometimes it is necessary to display code while developing a website. If we consider text formatting to match the code’s presentation, this could be a time-consuming process.
While programming, it is necessary to show the Output result, the error messages, or the coding part to the user on a webpage. In order to solve this issue, HTML uses different tags for the user inputs, codes, programs, etc. With the help of these tags, we will be able to write codes to display on our webpage. Following is the list of tags or computer codes that are used in HTML for this task.
- <code>
- <kbd>
- <samp>
- <var>
- <pre>
In an HTML document, computer codes are displayed in a different text style and formatting. HTML has a number of elements for displaying computer code. The most commonly used element is the <code> tag. Computer codes are useful in providing output results, error messages, or coding parts to users on a webpage. For better understanding, please have a look at the below image.
This is how text inside the code element gets displayed on the screen.
HTML <kbd> For Keyboard Input
The HTML <kbd> tag describes the text as user input from a keyboard, such as the Enter or Ctrl keys. Browsers typically display the text enclosed within the <kbd> tag in the default monospace font. This tag is also known as the <kbd> element. For better understanding, please have a look at the below example code.
<!DOCTYPE html> <html> <body> <h2>The Kbd Element</h2> <p>Press <kbd>Enter</kbd> to continue</p> <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
HTML <samp> For Program Output
The sample element is used to specify the sample output for a particular program on the screen. In the example below we have shown the sum of two numbers as output.
<!DOCTYPE html> <html> <body> <h2>The samp Element</h2> <p>The samp element is used to define sample output from a computer program.</p> <p>Message from my computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
HTML <code> For Computer Code
The HTML Code Element is used to represent some programming code on our webpage. The content written between the code tag will be displayed in default monospace font.
As you can see in the output below, the code element inside the pre-tag is formatted whereas the code element outside the pre-tag is not. Because the pre-tag inserts line breaks and space into each line to format the text. In the example below we have used the <code> element to insert code into the webpage.
<!DOCTYPE html> <html> <body> <h2>The code Element inside pre tag</h2> <pre> <code> #include<stdio.h> int main() { printf("Hello Learners"); } </code> </pre> <h2>The code Element without pre tag</h2> <code> #include<stdio.h> int main() { printf("Hello Learners"); } </code> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
HTML <var> For Variables
The HTML var element is used to define a variable in an HTML document. By default, the text inside a var element is italicized. Var elements are normally used in a mathematical expression. In the example below we have used var elements to define variables in mathematical expressions.
<!DOCTYPE html> <html> <body> <h2>The var Element</h2> <p>The area of a rectangle is: <<var>l</var> x <var>b</var>, where <var>b</var> is the base, and <var>l</var> is the length.</p> <p>A simple equation: <var>x</var> = <var>y</var> + 2 </p> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
HTML <pre> element
The <pre> element defines the preformatted text, which displays the content within it in a fixed-width font. It keeps the content in its original format and ignores all formatting. For better understanding, please have a look at the below example.
<!DOCTYPE html> <html> <body> <h3>Example of pre tag</h3> <pre> This is content written within pre tag, and pre tag will ignore all spaces, break lines, and will display the content as in original format. </pre> </body> </html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Header Elements in HTML with Examples. Here, in this article, I try to explain Computer Code Elements in HTML with Examples and I hope you enjoy this HTML Computer Code Elements with Examples article.