HTML Computer Code

In HTML we have several elements that are used to define the user input, variables and computer code. These elements include:

<code>
<kbd>
<var>
<samp>

The <code> Element

<code> element is used to define a piece of text as computer code in a web page. The text inside the code element is displayed in the browser’s default monospace font.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>The code element</h2>

<p>The HTML <code>kbd</code> tag is used to define keyboard input.</p>

<p>The CSS <code>background-color</code> property defines the background color of an element.</p>

</body>
</html>

Copy the Code and run it here

To make the <code> element stylish and interactive let’s use CSS to style it.

Example

<!DOCTYPE html>
<html>
<head>
<style>
code {
  font-family: Consolas,"courier new";
  background-color: #f1f1f1;
  padding: 2px;
  font-size: 105%;
}
</style>
</head>
<body>

<h1>The code element + CSS</h1>

<p>The HTML <code>kbd</code> tag is used to define keyboard input.</p>
<p>The CSS <code>background-color</code> property defines the background color of an element.</p>

</body>
</html>

Copy the Code and run it here

HTML <kbd> Element

HTML <kbd> element is used to represent user’s input or keyboard input. The text written between the <kbd> tags is displayed in the browser’s default monospace font.

Example

<!DOCTYPE html>
<html>
<head>
</head> 
<body>

<h2>The kbd Element</h2>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

</body>
</html>

Copy the Code and run it here

HTML <var> Element

The HTML <var> element is used to define some text as variable in a document. The text written between the <var> tags is displayed in italic. We usually use <var> tag when we have to define any mathematical expression.

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML var Element</h2>

<p>The area of a rectangle is: <var>l</var> x <var>w</var>, where <var>l</var> is the length, and <var>w</var> is the width .</p>

</body>
</html>

Copy the Code and run it here

The <samp> Element

The HTML <samp> element is used to represent a sample output from a computer program. The text between the <samp> tags is displayed in the browser’s default monospace font.

Example

<!DOCTYPE html>
<html>
<body>

<h2>The samp Element</h2>

<p>The HTML samp element is used to define sample output from a computer program.</p>

<p>Message from my computer:</p>
<p><samp>File not found.</br>Press F1 to continue</samp></p>

</body>
</html>

Copy the Code and run it here

Summary

<code> element is used to define a part of sentence as computer code in a web page.
<kbd> element is used to represent user’s input or keyboard input.
<var> element is used to define some text as variable in an HTML document, we usually use <var> element when we have to define some mathematical expression.
<samp> element is used to represent a sample output from a computer program.

Next

Related Posts

HTML Inline and Block Elements

HTML Canvas

Add JavaScript to HTML

HTML Computer Code – crus4