HTML Tags to Represent Programing Code

html
Published on November 21, 2019

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 :

New window in browser is opened by pressing Ctrl and n keys.

<samp>

The <samp> is used to represent the output generated by a computer program.

<span>Output is <samp>hello world</samp></span>

Rendered as :

Output is hello world

<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 :

The variable commonly used is the infamous x
In this Tutorial