Computer Code Elements

Keyboard Inputs

The <kbd> element is used for marking up user inputs like keyboard inputs. By default, this element is displayed in a monospace font that makes each character the same width.

<p>Press the <kbd>Ctrl</kbd> key for more information.</p>

Variables

The <var> element is used for specifying any mathematical or programming variables in the web page. By default, this element is italicized by the browser.

<p>The variable <var>sum</var> holds the output.</p>

Computer Code

The <code> element is used for marking up computer code. By default, this element is displayed in a monospace font which displays all the characters at the same width.

<code>
<pre>
int a,b;
a = 0;
b = a;
c = a + b;
c++;
</pre>
</code>

The pre element is used inside the code element so that it is displayed as it is typed on an editor.

Sample Output

In many situations, we may want to provide sample output for computer code. We can use the <samp> element for this particular task. By default, the content of this element is displayed in a monospace font.

<samp>
<pre>
Enter two numbers: 10 20
The sum of two numbers is 30
</pre>
</samp>

Time

In many cases, web pages have time and date information as content. But since people can represent the same time using different formats, there needs to be a machine-readable time format. This could be used for standardized time. The time element is used for this purpose. It has a datetime attribute that could have the machine-readable time.

<!-- Only year -->

<time datetime="2018">2018</time>

<!-- Year and month -->

<time datetime="2018-08">August 2018</time>

<!-- Month and day -->

<time datetime="08-06">6th August</time>

<!-- Year, month and date -->

<time datetime="2018-08-06">August 6th, 2018</time>

<!-- Specific week-->

<time datetime="2018-W06">6th week of 2018</time>

<!-- Only the time in hours and minutes -->

<time datetime="15:17">15:17</time>

<!--Only time in hours, minutes, seconds and milliseconds -->

<time datetime="15:17:04.347">15:17:04.347</time>

<!-- Date with time -->

<time datetime="2018-08-06T15:17">August 6th 2018 15:17</time>

<!-- Date and time with different time zone -->

<time datetime="2018-08-06T15:17+05:30">20:47 in India, 6th August,2018</time>