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.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Computer-code in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML All HTML Tag.