HTML Samp Tag

In this tutorial, we will learn about HTML samp Tag. HTML provides samp tags to define the sample output of a source code in a proper format.

Sometimes, we have to show the output of a program in text with proper font style and format. Without using any external CSS, we can show the sample output of a program using this tag

 HTML samp tag Implementation:

Example 1:

This is the fundamental example of samp tag implementation.

Code

<!DOCTYPE html>
<html>
<head>
<title> Basic Example of samp tag in HTML </title>
</head>
<body>
<samp> Sample output of a source code: codespeedy. . . </samp>
</body>
</html>

Output

Sample of output of a program or script text codespeedy. . .

In this example, we have basic tag samp with sample text within it. The output is printed in a monospaced font.

Example 2:

In this example, we will compare output produced by using samp tag with normal text.

code

<!DOCTYPE html>
<html>
<head>
<title> sample output produced by using samp tag with normal text </title>
<style>
.sample {
font-family: monospace;
}
</style>
</head>
<body>
<samp> codespeedy output of a code using samp tag. . . </samp>
<br>
<br>
<div>  codespeedy  output of a source code without using samp tag </div>
<br>
<div class = "sample"> codespeedy without using samp tag,
<br> codespeedy as monospace font-family </div>
</body>
</html>

Output

codespeedy output of a code text using samp tag. . .

codespeedy  output of a source code without using samp tag 

codespeedy without using samp tag,
codespeedy as monospace font-family

In this code, we have displayed output in three different ways. In the main tag, we have three lines of text.  The first output is by using the samp tag. In the second line, we have normal text. We have compared the output of the first line with the normal text. Lastly, in the third line we have used CSS to gain output same as the first.

Leave a Reply

Your email address will not be published. Required fields are marked *