HTML Computer Code

HTML Tutorial

About Lesson

HTML Computer Code

In this tutorial, we will learn to write programming code in HTML with the help of examples.

Computer Code

HTML provides different types of elements to display programming examples on the websites.
HTML contains different tags for defining user input and computer code.

List of some tags which are used in HTML for computer code :

<code> Tag
<kbd> Tag
<samp> Tag
<var> Tag
<pre> Tag

<code> Element

The HTML <code> tag is used to define a piece of computer code on the web page. The text written inside the <code> element will be displayed in the browser’s default monospace font.

Note : The <code> tag does not preserve extra whitespace and line-breaks, to solve this problem we use <code> element inside the <pre> element.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Computer Code</title>
  </head>
  <body>
    <h2>HTML Element</h2>
    <p>This is computer Programming Code.</p>
    <code>
      x = 4;<br>
      y = 8;<br>
      z = x + y;
    </code>
  </body>
</html>

Output

HTML Element

This is computer Programming Code.

x = 4;
y = 8;
z = x + y;

<kbd> Element

The HTML <kbd> element is used to define the Keyboard input on the web page.
The text written inside the <kbd> element will be represents the browser’s default monospace font.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Computer Code</title>
  </head>
  <body>
    <kbd>The text written inside the kbd element looks like.</kbd>
  </body>
</html>

Output

The text written inside the kbd element looks like.

<samp> Element

The HTML <samp> element is used to define an output from a computer program.
The text written inside the <samp> element will be displayed in the browser’s default monospace font.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Computer Code</title>
  </head>
  <body>
    <h2>HTML Element</h2>
    <samp>The text written inside the samp element look like.</samp>
  </body>
</html>

Output

HTML Element

The text written inside the samp element look like.

<var> Element

The HTML <var> element is used to define a variable in a programming language or a mathematical expression.
The text written inside the <var> tag is typically displayed in italic style.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Computer Code</title>
  </head>
  <body>
    <h2>HTML Element</h2>
    <var>The text written inside the var element looks like.</var>
  </body>
</html>

Output

HTML Element

The text written inside the var element looks like.

<pre> Element

HTML <pre> tag defines preformatted text.
The <pre> tag display text as written in HTML document.
The <pre> tag break all the limitations (like-spaces, line break, etc) of the paragraph tag.
It displays text within a fixed width-height and preserves the extra lines and whitespaces.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Computer Code</title>
  </head>
  <body>
    <pre>This is
First
paragraph.</pre>
    <pre>This is     Second paragraph.</pre>
  </body>
</html>

Output

This is
First
paragraph.

This is Second paragraph.