W3docs

HTML Computer Code Elements

On this page, you can find interesting information about computer code elements, learn when and where you can use them and see different useful examples.

The computer has a special formatting and text style for displaying the messages that are connected to codes. There exist different computer code elements in HTML.

The HTML <code> tag

The HTML <code> tag inserts fragments of a program code, variables, etc. into an HTML document. In the browser, the code is displayed in a monospaced font of a smaller size.

Example of the HTML <code> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is an ordinary text.</p>
    <code>This is a program code.</code>
    <p>This is the continuation of the ordinary text.</p>
  </body>
</html>

The HTML <var> tag:

The <var> tag defines variable in a mathematical expression or a programming context.

Example of the HTML <var> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><var>x</var> = <var>y</var> + 5</p>
  </body>
</html>

The HTML <kbd> tag:

The <kbd> tag specifies a keyboard input. It is used when we need to display text that should be entered into the user’s keyboard.

Example of the HTML <kbd> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>The kbd example</h2>
    <p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
  </body>
</html>

The HTML <samp> tag

The <samp> tag contains output from a computer program or a script. It is by default displayed in monospace font.

Example of the HTML <samp> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is an ordinary text. <samp>But this is a sample text.</samp> Here is another ordinary text.</p>
  </body>
</html>

Practice

Practice

Which tags are used in HTML to display computer code?