Computer Code in HTML

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.

  1. <code>
  2. <kbd>
  3. <samp>
  4. <var>
  5. <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.

Computer Code Elements in HTML with Examples

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 <kbd> For Keyboard Input

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 <samp> For Program Output

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 <code> For Computer Code

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 <var> For Variables

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.

HTML Computer Code Elements with Examples

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.

Leave a Reply

Your email address will not be published.