HTML Computer Code Elements

Quiz

HTML computer code elements (tags) provide unique formatting and text styles for different types of code-related messages, such as keyboard input, preformatted text, code snippets, variables, and sample outputs. The computer code elements are listed as follows:

<kbd> Element
<pre> Element
<code> Element
<var> Element
<samp> Element

HTML <kbd> Element

The <kbd> tag is used to define the keyboard input. Use this when you want the user to type on their keyboard, for example, shortcut keys Ctrl+C for copy, Esc for exit, etc.

Example

Let us now see an example to implement the <kbd> tag:

<!DOCTYPE html>
<html>
   <body>
      <h2>Example of kbd Tag</h2>
      <p>Use the following shortcut keys:</p>
      <p><strong>Cut</strong>  <kbd>CTRL</kbd>+<kbd>X</kbd></p>
      <p><strong>Copy</strong>  <kbd>CTRL</kbd>+<kbd>C</kbd></p>
      <p><strong>Paste</strong>  <kbd>CTRL</kbd>+<kbd>V</kbd></p>
      <p><strong>Undo</strong>  <kbd>CTRL</kbd>+<kbd>Z</kbd></p>
   </body>
</html>

HTML <pre> Element

The <pre> tag in HTML is used to set preformatted text. The text preserves spaces and line breaks, appearing the same on the web page as in the HTML code.

Example

Let us now see an example to implement the <pre> tag:

<!DOCTYPE html>
<html>
   <body>
      <h2>Example of pre Tag</h2>
      <pre>
  This is a demo text
  and will appear
  in the same format as
  it
  is visible
  here. The pre tag displays
  the text in a fixed-width
  font. It preserves
  both spaces and
  line breaks as you can see
  here.
</pre>
   </body>
</html>

HTML <code> Element

The <code> tag is used to format code in an HTML document. For example, to write and format Java code properly, use the <code> element.

Example

Let us now see an example to implement the <code> element:

<!DOCTYPE html>
<html>
   <body>
      <h1>Example of code Tag</h1>
      <h2>C++</h2>
      <code>
         #include 
         <iostream>
      </code>
      <h2>C</h2>
      <code>
         #include 
         <stdio.h>
      </code>
   </body>
</html>

HTML <var> Element

The <var> tag in HTML is used to display mathematical expressions for calculations.

Example

Let us now see an example to implement the <var> tag:

<!DOCTYPE html>
<html>
   <body>
      <h2>Example of var Tag</h2>
      Sample equation  <var>2x</var> - <var>2z</var> = <var>3y</var> + 9
   </body>
</html>

HTML <samp> Element

The <samp> tag is a phrase tag used to format text in an HTML document.

Example

Let us now see an example to implement the <samp> element:

<!DOCTYPE html>
<html>
   <body>
      <h2>Exam Results</h2>
      <p><s>Result would be announced on 6th June.</s></p>
      <samp>New date for results is 7th June.</samp>
   </body>
</html>

HTML Computer Code Elements

Here is the list of the computer code tags along with their descriptions used for defining user input and computer code:

Tag	Description
`<kbd>`	Defines keyboard input.
`<pre>`	Displays preformatted text with preserved spaces and line breaks.
`<code>`	Defines a piece of computer code.
`<var>`	Represents a variable in programming or math expressions.
`<samp>`	Defines sample output from a program or device.

Print Page