HTML CODE ELEMENTS


Several elements are contained within HTML for defining user input and computer code. To display the messages related to these codes, the computer has unique formatting and text styles.

To display the computer code on the website, the <code> tag is used.

A number of elements are available to mark up the computer code using HTML.


CODE TAG


When webpages are created, sometimes there is a need to display the computer programming code on the website. For that we use the <code> tag.
Content inside the <code> tag is displayed in the browser's default monospace font which has a fixed letter size, font, and spacing.


Syntax:


<code> Computer code contents... </code>


Example:


<!DOCTYPE html>
<html>
<body>

<code>
a1 = 5;
b1 = 6;
total = a1 + b1;
</code>

</body>
</html>
Live Demo!


Output:
a1 = 5; b1 = 6; total = a1 + b1;


This is because, <code> element does not preserve extra whitespace and line-breaks. Therefore, to fix this, <pre> element is used.

The <pre> tag is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters. The default fix-width font of the <pre> tag can be changed using CSS.


Syntax:


<pre> Contents... </pre>


Example:


<!DOCTYPE html>
<html>
<body>
  <pre>
  <code>
    a1 = 5;
    b1 = 6;
    total = a1 + b1;
  </code>
  </pre>
</body>
</html>
Live Demo!


Output:
a1 = 5;
b1 = 6;
total = a1 + b1;


Changing default font of <pre> tag using CSS.




<!DOCTYPE html>
<html>
<head>
<title>pre tag with CSS</title>
<style>
  pre {
  font-family: Arial;
  color: #808000;
  margin: 10px;
}
</style>
</head>
<body>

<pre>
Hello
Lets change pre tags default font!!
</pre>

</body>
</html>
Live Demo!


Output:
Hello
Lets change pre tags default font!!


KBD TAG


KBD stands for keyboard hence, it is keyboard tag which is used to define the keyboard input. The text displayed between <kbd> tag represents that similar text input is required by the user using keyboard.


Syntax:


<kbd> Contents... </kbd>


Example:


<p> press<kbd> F1 </kbd>to continue displaying further</p>
Live Demo!


Output:

press F1 to continue displaying further



The text F1 will be displayed in the browser’s default monospace font.


SAMP TAG


Samp stands for sample and its a phrase tag which is used to define the sample output text from a computer program. It has enclose inline text inside it, which represents sample output from a computer program and is displayed in the browser's default monospace font.


Syntax:


<samp> Contents... </samp>


Example:


<p>defining text as sample output</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
Live Demo!


Output:

defining text as sample output

File not found.
Press F1 to continue



VAR TAG


Var stands for variable and is used to specify the variable in a mathematical equation or in a computer program. In most of the browsers, content inside this tag is displayed in the italic format.


Syntax:


<var> Contents... </var>


Example:


<p>Defining text as variables in a document.
<var>b</var> Rocky <var>, Manitoba</var>,
where <var>, Rose</var> are proper nouns, and
<var>flower</var> is a common noun</p>
Live Demo!