HTML Computer code

HTML Computer code Tutorials

1. HTML Computer code

When we are programming, sometimes it is mandatory to show the Output result, error message, or coding part to user on a webpage. Hence to solve this issue HTML uses different tags for the user inputs, codes, programs, etc. With the help of these tags, you will be able to write codes to display on your webpage.

Following is a list of some tags which are used in HTML for this task.

  • <code>
  • <kbd>
  • <samp>
  • <var>
  • <pre>

2. HTML code element

It is used to represent some programming code on your website. The content written between tag will be displayed in default monospace font.

3. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Computer Code</h2>  
  5. <p>This is a programming code:</p>  
  6. <code>  
  7. x = 5;<br>  
  8. y = 6;<br>  
  9. z = x + y;  
  10. </code>  
  11. </body>  
  12. </html>  

4. HTML kbd Element

It is used to represent user input, keyboard input, voice command etc. Text written within <kbd>.....</kbd> tags is typically displayed in the browser's default monospace font.

5. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>The kbd Element</h2>  
  5. <kbd>This is how  content written within kbd element looks like.</kbd></p>  
  6. </body>  
  7. </html>  

6. HTML samp Element

The HTML <samp> element is used to represent a program's output. Text written within samp element is typically displayed in the browser's default monospace font.

7. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>The samp Element</h2>  
  5. <samp>This is how the content within samp element looks like. </samp>  
  6. </body>  
  7. </html>  

8. HTML var element

The HTML <var> element is used to define a variable. The variable could be a variable in a mathematical expression or a variable in programming context.

9. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>The var Element</h2>  
  5. <p>This is a famous formula: <var>E</var> = <var>mc</var><sup>2</sup>.</p>  
  6. </body>  
  7. </html>  

10. HTML pre element

The <pre> element defines preformatted text, which displays the content within it in a fixed-width font. It keeps the content into its original format and ignores all formatting.

11. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h3>Example of pre tag</h3>  
  5.   <pre>  
  6.     This is content written   
  7.     within pre tag, and  pre tag will ignore all   
  8.     spaces,     break lines, and will display the content   
  9.     as in original format.   
  10.   </pre>  
  11.  </body>  
  12. </html>