Use-Cases of this tutorial
- Know about HTML tags that can be used to show computer code, input and output information in a webpage.
The <code>, <kbd>, <samp> and <var> tags can be used to represent programming and code information in HTML pages.
There are certain HTML tags which are appropriate to display computer code and programming related stuff in a webpage.
This artice discusses 4 such HTML tags.
<code>
The <code> tag is used to indicate that contained text is part of computer code.
As the <code> tag is used to represent a single line of code, to display multiple lines of computer code we need to wrap <code> within a <pre> tag.
<pre><code>
var a = 10;
console.log(a + 10);
</code></pre>
Rendered as :
var a = 10;
console.log(a + 10);
<kbd>
The <kbd> is used to indicate a keyboard input, voice input or input from some other means.
<span>New window in browser is opened by pressing <kbd>Ctrl</kbd> and <kbd>n</kbd> keys.</span>Rendered as :
<samp>
The <samp> is used to represent the output generated by a computer program.
<span>Output is <samp>hello world</samp></span>Rendered as :
<var>
The <var> is used to represent a variable from a computer program. This tag can also be used to represent a mathematical variable from a formulae.
<span>The variable commonly used is the infamous <var>x</var></span>Rendered as :