HTML Computer Code Elements






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



HTML Computer Code Elements



❮ Previous
Next ❯



Computer Code



<code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>

Try it Yourself »



HTML <kbd> For Keyboard Input


The HTML <kbd> element represents user input, like
keyboard input or voice commands.


Text surrounded by <kbd> tags is typically displayed in the browser's default
monospace font:



Example



<p>Save
the document by pressing <kbd>Ctrl + S</kbd></p>

Result:



Save the document by pressing Ctrl + S

Try it Yourself »


HTML <samp> For Program Output


The HTML <samp> element represents output from a
program or computing system.


Text surrounded by <samp> tags is typically displayed in the browser's
default monospace font:



Example



<p>If you input wrong value, the program will return <samp>Error!</samp></p>

Result:



If you input wrong value, the program will return
Error!

Try it Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




HTML <code> For Computer Code


The HTML <code> element defines a fragment of computer
code.


Text surrounded by <code> tags is typically displayed in the browser's
default monospace font: 




Example



<code>
x = 5;
y = 6;
z = x + y;
</code>

Result:




x = 5;
y = 6;
z = x + y;


Try it Yourself »


Notice that the <code> element does not preserve extra whitespace and line-breaks.


To fix this, you can put the <code> element inside a <pre> element:




Example



<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

Result:




x = 5;
y = 6;
z = x + y;



Try it Yourself »



HTML <var> For Variables


The HTML <var> element defines a variable.


The variable could be a variable in a mathematical expression or a
variable in programming context:



Example



Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.

Result:



Einstein wrote: E = mc2.

Try it Yourself »



Test Yourself with Exercises!



Exercise 1 »  
Exercise 2 »  
Exercise 3 »



HTML Computer Code Elements



























TagDescription
<code>Defines programming code
<kbd>Defines keyboard input 
<samp>Defines computer output
<var>Defines a variable
<pre>Defines preformatted text



❮ Previous
Next ❯

-

Popular posts from this blog

HTML5 Browser Support

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> HTML5 Browser Support ❮ Previous Next ❯ You can teach older browsers to handle HTML5 correctly. HTML5 Browser Support HTML5 is supported in all modern browsers. In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can "teach" older browsers to handle "unknown" HTML elements. You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements. Define Semantic Elements as Block Elements HTML5 defines eight new semantic elements. All these are block-level elements. To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block : header, section, footer, aside, nav, main, article, figure {     display: block; } Add New Elements to HTML You can also add new elements to an HTML page with a browser trick. This example adds a ne...
Read more

CSS Box Sizing

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Box Sizing ❮ Previous Next ❯ CSS Box Sizing The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height). The following illustration shows two <div> elements with the same specified width and height: This div is smaller (width is 300px and height is 100px). This div is bigger (width is also 300px and height is 100px). The two <div> elements above end up with different sizes in the re...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more