HTML facilitates users to use several elements for defining both user input and computer code.
What is a computer code ?
Its is a <code> tag is used to display the computer code on the website.
HTML allows <code> tag to display computer code in webpage with fixed letter size, font, and spacing.
This cannot be formatted like text-formatting.
What are the computer code elements available ?
There are five different computer code elements available listed below
1. <code></code>
Defines programming code
2. <kbd></kbd>
Defines keyboard input
3. <samp></samp>
Defines computer output
4. <var></var>
Defines a variable
5. <pre></pre>
Defines pre-formatted text
HTML code elements
1. <code></code>
<code> tag is used to define the specific piece of computer code.
When creating HTML webpages if there is a need to display computer programming code, <code> tag is used.
HTML allows <code> tag to display computer code in webpage with fixed letter size, font, and spacing.
Note :
Whatever program which is written inside the <code> tag has some different font size and font type to the basic heading tag and paragraph tag.
<pre> tag is used to display code snippet because it always keeps the text formatting as it.
This tag styles its element to match computer’s default text format.
The web browsers by default use a mono space font family for displaying <code> tags element content.
Syntax:
<code> Computer language code contents... </code>
1-1 : <code></code> tag without <pre></pre> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML computer codes</title>
</head>
<body>
<code>
public class myClass{
public static void main(String args[]){
System.out.println("Hello World");
}
}
</code>
</body>
</html>
Output :
1-2 : <code></code> tag with <pre></pre> tag.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML computer codes</title>
</head>
<body>
<pre>
<code>
public class myClass{
public static void main(String args[]){
System.out.println("Hello World");
}
}
</code>
</pre>
</body>
</html>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
2. <kbd></kbd>
<kbd></kbd> is a phrase tag defines the keyboard input.
Whatever text written between the <kbd> tag represents similar text should be typed on the keyboard.
Note :
<kbd> tag text will be displayed in the browser’s default mono-space font.
We can achieve richer font effect by using CSS properties.
There is no attributes for this tag.
Syntax :
<kbd> Website Content ... </kbd>
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML computer codes</title>
</head>
<body>
<kbd>Sample</kbd>
<kbd>Computer</kbd>
<kbd>Codes</kbd>
</body>
</html>
Output :
3. <samp></samp>
<samp></samp> is a phrase tag defines the sample output text from a computer program.
This is used to enclose inline text which represents sample output from a computer program.
Syntax:
<samp> Website Content ... </samp>
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML computer codes</title>
</head>
<body>
<samp>Welcome to CSTechbook study portal.</samp>
</body>
</html>
Output :
4. <var></var>
<var></var> is a phrase tag defines the variable in a mathematical equation or in a computer program.
The content will be displayed in the italic format in most of the browsers.
Syntax:
<var> Website Content ... </var>
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML computer codes</title>
</head>
<body>
<var>This is a Sample Variable</var>
</body>
</html>
Output :
5. <pre></pre>
<pre></pre> tag defines the block of pre-formatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.
<pre></pre> tag displays the text in a fixed-width font, but it can be changed using CSS.
Syntax:
<pre> Website Content ... </pre>
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML computer codes</title>
</head>
<body>
<pre>
LEARNING GIVES CREATIVITY, CREATIVITY LEADS TO THINKING, THINKING PROVIDES KNOWLEDGE, KNOWLEDGE MAKES YOU GREAT – A.P.J ABDUL KALAM
</pre>
</body>
</html>
Output :
