Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
26 views

Computer Code in HTML

The document discusses various HTML elements used for displaying computer code, including <code>, <kbd>, <samp>, <var>, and <pre>. It provides examples of each element and how it formats text. These elements allow coding elements like program output, keyboard input, and variables to be displayed on webpages.

Uploaded by

Jeronimo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Computer Code in HTML

The document discusses various HTML elements used for displaying computer code, including <code>, <kbd>, <samp>, <var>, and <pre>. It provides examples of each element and how it formats text. These elements allow coding elements like program output, keyboard input, and variables to be displayed on webpages.

Uploaded by

Jeronimo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Computer Code in HTML

Dot Net Tutorials

Back to: HTML Tutorials

Computer Code Elements in HTML with Examples

In this article, I am going to discuss Computer Code Elements in HTML with Examples.
Please read our previous article where we discussed Entities in HTML with Examples. At the
end of this article, you will learn everything about HTML Computer Code Elements with
Examples.

Computer Code Elements in HTML


Sometimes it is necessary to display code while developing a website. If we consider text
formatting to match the code’s presentation, this could be a time-consuming process.

While programming, it is necessary to show the Output result, the error messages, or the coding
part to the user on a webpage. In order to solve this issue, HTML uses different tags for the user
inputs, codes, programs, etc. With the help of these tags, we will be able to write codes to display
on our webpage. Following is the list of tags or computer codes that are used in HTML for this
task.

<code>

<kbd>

<samp>

<var>

<pre>
In an HTML document, computer codes are displayed in a different text style and formatting.
HTML has a number of elements for displaying computer code. The most commonly used
element is the <code> tag. Computer codes are useful in providing output results, error
messages, or coding parts to users on a webpage. For better understanding, please have a look at
the below image.

This is how text inside the code element gets displayed on the screen.

HTML <kbd> For Keyboard Input


The HTML <kbd> tag describes the text as user input from a keyboard, such as the Enter or Ctrl
keys. Browsers typically display the text enclosed within the <kbd> tag in the default monospace
font. This tag is also known as the <kbd> element. For better understanding, please have a look
at the below example code.

<p>Press <kbd>Enter</kbd> to continue</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p>

<!DOCTYPE html> <html> <body> <h2>The Kbd Element</h2> <p>Press <kbd>Enter</kbd>


to continue</p> <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p> </body> </html>

<!DOCTYPE html>
<html>
<body>

<h2>The Kbd Element</h2>


<p>Press <kbd>Enter</kbd> to continue</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HTML <samp> For Program Output


The sample element is used to specify the sample output for a particular program on the screen.
In the example below we have shown the sum of two numbers as output.

<h2>The samp Element</h2>

<p>The 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>

<!DOCTYPE html> <html> <body> <h2>The samp Element</h2> <p>The 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>

<!DOCTYPE html>
<html>
<body>
<h2>The samp Element</h2>

<p>The 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>

When you run the above HTML code, you will get the following output in the browser.
HTML <code> For Computer Code

The HTML Code Element is used to represent some programming code on our webpage. The
content written between the code tag will be displayed in default monospace font.

As you can see in the output below, the code element inside the pre-tag is formatted whereas the
code element outside the pre-tag is not. Because the pre-tag inserts line breaks and space into
each line to format the text. In the example below we have used the <code> element to insert
code into the webpage.

<h2>The code Element inside pre tag</h2>

printf("Hello Learners");

<h2>The code Element without pre tag</h2>

printf("Hello Learners");

<!DOCTYPE html> <html> <body> <h2>The code Element inside pre tag</h2> <pre> <code>
#include<stdio.h> int main() { printf("Hello Learners"); } </code> </pre> <h2>The code
Element without pre tag</h2> <code> #include<stdio.h> int main() { printf("Hello Learners");
} </code> </body> </html>

<!DOCTYPE html>
<html>
<body>

<h2>The code Element inside pre tag</h2>

<pre>
<code>
#include<stdio.h>
int main() {
printf("Hello Learners");
}
</code>
</pre>

<h2>The code Element without pre tag</h2>


<code>
#include<stdio.h>
int main() {
printf("Hello Learners");
}
</code>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.
HTML <var> For Variables

The HTML var element is used to define a variable in an HTML document. By default, the text
inside a var element is italicized. Var elements are normally used in a mathematical expression.
In the example below we have used var elements to define variables in mathematical
expressions.

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

<var>x</var> = <var>y</var> + 2 </p>

<!DOCTYPE html> <html> <body> <h2>The var Element</h2> <p>The area of a rectangle is:
<<var>l</var> x <var>b</var>, where <var>b</var> is the base, and <var>l</var> is the
length.</p> <p>A simple equation: <var>x</var> = <var>y</var> + 2 </p> </body> </html>

<!DOCTYPE html>
<html>
<body>

<h2>The var Element</h2>

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

<p>A simple equation:


<var>x</var> = <var>y</var> + 2 </p>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.
HTML <pre> element

The <pre> element defines the preformatted text, which displays the content within it in a fixed-
width font. It keeps the content in its original format and ignores all formatting. For better
understanding, please have a look at the below example.

<h3>Example of pre tag</h3>

within pre tag, and pre tag will ignore all


spaces, break lines, and will display the content

<!DOCTYPE html> <html> <body> <h3>Example of pre tag</h3> <pre> This is content
written within pre tag, and pre tag will ignore all spaces, break lines, and will display the content
as in original format. </pre> </body> </html>

<!DOCTYPE html>
<html>
<body>
<h3>Example of pre tag</h3>
<pre>
This is content written
within pre tag, and pre tag will ignore all
spaces, break lines, and will display the content
as in original format.
</pre>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Header Elements in HTML with Examples. Here, in
this article, I try to explain Computer Code Elements in HTML with Examples and I hope
you enjoy this HTML Computer Code Elements with Examples article.

About the Author: Pranaya Rout


Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has
very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET
Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud
Computing, Microservices, Design Patterns and still learning new technologies.

You might also like