Computer code Elements in HTML

HTML uses different formatting tags and Attributes to display content on the webpage but when we have to show the output of programming related codes HTML uses computercodes. Let us understand the HTML Computer code Element in detail.

HTML Computercode Element

HTML Computercode elements used to markup the important text related codes, input, outputs and keywords, errors, etc in HTML document which is needed to display on the webpage. To write code elements on the website several tags are used in the HTML document.

Below are the following tags used in HTML Computercode.

<code> tag

This HTML <code> tag is used to define the piece of programming code in the format of the HTML document with the content displayed in default monospace font on the webpage.

Syntax

<code> Computercode contents </code>   

  • <code> tag is displayed with fixed letter size, font, and spacing and without line breaks.
  • The code element is usually placed inside pre tag to take advantage of its characteristics of spacing and line breaks in the program are altered accordingly in the document.
  • HTML <code> tag supports global and event Attributes.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>HTMLComputercode Element</h2>
<p>Example 	of code:</p>

<code>
a = 5;
b = 6;
sum = a + b;
</code>

</body>
</html>

OUTPUT:

<pre> tag

This HTML <pre> tag is used to define the preformatted text, which preserves the text spaces, line breaks, and other formatting text and the content displayed with the fixed-width font on the webpage.

Syntax

<pre> Element Content </pre>

  • <pre> tag keeps the content into its original format while ignoring the othe formats of HTML document .
  • Text in the <pre> tag appears the same on the webpage as it is added to the HTML code.
  • The width and font of the <pre> tag can be changed using CSS.
  • <pre> tag supports global and event Attributes.

Example:

    <!DOCTYPE html>  

    <html>  

    <body>  

    <h3>Example of html pre tag</h3>  

      <pre>  
        welcome to the codedec website
        HTML Article by AMAN .
       within the the pre tag ignoring the line breaks and display the content with original font
   

      </pre>  

     </body>  

    </html>  

OUTPUT:

<var> tag

This HTML <var> tag is used to define the variable which can be any computer code or in a mathematical expression, It is mostly by default displayed in the italic format on the web browsers.

Syntax

<var> Element Contents </var>

  •  The elements of MathML consitute a better alternative to <var> to define variable inside a mathematical equation.
  • HTML <var> tag supports global and event Attributes.

Example:

<!DOCTYPE html>
<html>
<body>
<h1> Example of variable in HTML </h1>
<h2>Mathematical Equation</h2>
 equation − <var>5x</var> + <var>2y</var> = <var>- 2z</var> + 13
</body>
</html>

OUTPUT:

<kbd> tag

This HTML <kbd> tag is used to define the keyboard input, it represents the user input that is similar to the text typed on the keyboard with the content displayed in default monospace font on the webpage.

Syntax

<kbd> Element contents </kbd>

  • When the <samp> tag  contains a <kbd> element, it represents  that the output includes a command or text that was input by the user.
  • When the <kbd> tag contains another<kbd> element it represents a single unit of input.
  • <kbd> tag supports global and event Attributes.:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Example of HTML kbd tag</h2>

<p>Undo the closed window with <kbd>Ctrl + shift + T</kbd></p>

</body>
</html>

OUTPUT:

<samp> tag

This HTML <kbd> tag is used to define the sample output from a computer program or script, It is used to format text in HTML document with the content displayed in default monospace font on the webpage.

Syntax

<samp> Elements Content </samp

  •  When the <kbd> tag is containing a <samp> element, it represents a user input  based on a computer output.
  • The kbd element is usually placed inside pre tag to take advantage of its characteristics of spacing and line breaks in the program are altered accordingly in the document.
  • <kbd> tag supports the global and event Attributes.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Example of sample output from a computer program :</p>

<samp>
aman@aman-VPCEH36EN:~$ python3
Python 3.6.9 (default, Jul 17 2020, 12:50:27) 
[GCC 8.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> print("hello")
hello
</samp>

</body>
</html>

OUTPUT: