HTML Computer Codes: kbd | samp | code | pre | var Elements

In this HTML tutorial, we will learn about HTML Computer code elements. There are a number of HTML elements that can help to demonstrate some keyboard keys input, representing some quoted output from Computer, showing a short fragment of computer code.

In simple words,

  1. The <kbd> element- is used to define keyboard input,
  2. The <samp> element- Defines computer output,
  3. The <code> element- Defines programming code,
  4. The <pre> HTML element- is used to display preformatted text which is to be presented exactly as written in the HTML file,
  5. The <var> element- is used to Define a variable.

The HTML Computer code elements can be useful in many other situations, so let’s learn about them one-by-one :

There are a number of HTML Computer Codes Elements


 <kbd>: HTML Computer Codes element

The HTML Keyboard Input element is denoted by a <kbd> tag. You can use it with a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

The official rules and best practices tell that, the user agent defaults to rendering the contents of an <kbd>  element using its default monospace font, although this is not mandated by the HTML standard.

Example:

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render a page.</p>

Output:

Please press Ctrl + Shift + R to re-render a page.


<samp> : HTML Computer Codes

The HTML Sample Element is denoted by the <samp>  tag. It 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 (such as Courier or Lucida Console).

Example:

<p>When I tried to run the Web application, I saw this message on my computer screen:</p>

<p><samp>Keyboard not found <br>Press F1 to continue</samp></p>

Output:

When I tried to run the Web application, I saw this message on my computer screen:

Keyboard not found
Press F1 to continue


<code> : HTML Computer Codes

As you might already understand, what is the purpose of this HTML <code>  computer code element. It basically displays its contents styled in a fashion to demonstrate that the segment is a computer code. By default, the content text is displayed using the user agent’s default monospace font.

Example:

<p>The <code>pop()</code> method removes the last inserted element in the array.</p>

Output:

The pop() method removes the last inserted element in the array.


<pre> : HTML Computer Code

In HTML, the <pre> element basically represents the preformatted text which you want to present exactly as written in the HTML file. The text is typically rendered using a non-proportional (“monospace”) font. Whitespace inside this element is displayed as written.

Example:

<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
</pre>

Output:

  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE

<var> : HTML Computer Code Element

The HTML variable element is represented by the <var> tag. Its main purpose of use is to represent 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, although that behavior is browser-dependent.

Example:

<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>

Output:

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.


Summary:

So far, in this HTML Computer codes tutorial, we learned how to use different HTML elements in different scenarios, especially when working with Computer programming related content.

Hope you found this guide helpful. Learn other popular related HTML and CSS guides –

+ Starting with HTML and CSS- How They Work?
+ How to center a Heading in HTML?
+ Complete List of HTML and CSS Tutorials !

Leave a Comment