HTML Computer Code Tags are use to express the simplest font style or look without any extra formatting. Usually this elements display the fragments of computer codes in the browser’s defaults monospace

HTML Computer Code Tags


Sometimes we have to show the computer programming codes over web pages. Most often this is required when we want to develop the computer programming tutorial websites or webpages.

Why use HTML Computer Code Tags?


HTML Computer Code Tags are use to express the simplest font style or look without any extra formatting. Usually this elements display the fragments of computer codes in the browser’s defaults monospace font.


<code>
 var a = 9;<br />
 var b = 16;<br />
 c = a + b;<br />
</code>



In Chapter we will learn about four Computer Code Tags which are mentioned below:

1. Code Element - <code>
2. Key Board Element - <kbd>
3. Sample Element - <samp>
4. Variable Element - <var>
5. Output Element - <output>


Code Element for computer codes


The Code Element is an inline element that displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.


<!DOCTYPE html>
<html>
<title>HTML5 Tutorial - HTML Computer Code Element.</title>
<body>
<h1>This is the Example of Computer Code Element.</h1>
<p>Use of Code Element.</p>
<code>
 var a = 9;
 var b = 16;
 c = a + b;
</code>
</body>
</html>


Code Element doesn’t preserve the whitespace. Code Element can be nested inside the <pre> element also to preserve the whitespace like given in below example.


<code>
 var a = 9;<br />
 var b = 16;<br />
 c = a + b;<br />
</code>


Keyboard Element for Keyboard inputs


The HTML Keyboard Input element <kbd> represents a span of inline text denoting textual user input from a keyboard, voice input or any other text entry devices. By default, the content text is displayed using the user agent's default monospace font. Also custom style can defined to override the browser defaults.  Although this is not mandated by the HTML standard.


<p>Use of kbd Element.</p>

<p>Use the <kbd>Alt + F4</kbd> key to execute the shut down menu in Windows 10.</p>


Sample Element for sample output


The HTML Sample Element <samp> is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font.


<pre>
<code>
 var a = "6";
 var b = 5;
 a + b = <samp>Error.</samp>
</code>
</pre>


Variable Element for variables


The HTML Variable element <var> represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface. This element is not supported by all the browsers.


<p>Use of var Element.</p>

<code>
 <var>var a</var> = 6;
 <var>var b</var> = 7;
 <var>a + b</var> = 13;
</code>

<h2>Another Example</h2>
<pre>
<code>
 <var>var a</var> = 6;
 <var>var b</var> = 7;
 <var>a + b</var> = 13;
</code>

</pre>

Output Element for result output


The HTML Output element <output> is a container element into which a website or app can inject the results of a calculation or the outcome of a user action.


<form oninput = "result.value = parseInt(x.value)+parseInt(y.value)">
 <input type = "range" name = "x" value = "50" /> +
 <input type = "number" name = "y" value = "100"/> =
 <output name = "result">150</output>
</form>


HTML5 Tutorial - HTML Computer Code Elements

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

0 comments: