Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we add a sample computer code in HTML?
Use the <samp> tag to display a sample computer code. The HTML <samp> tag is used to display the output of a computer program or sample text that would appear on a computer screen, such as command-line output, error messages, or program responses.
Syntax
Following is the syntax for the <samp> tag −
<samp>Sample computer output</samp>
The <samp> tag is an inline element that typically displays its content in a monospace font, making it visually distinct from regular text.
Basic Example
Following example shows how to use the <samp> tag to display sample computer code or output −
<!DOCTYPE html> <html> <head> <title>HTML samp Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 15px;"> <p>The header file always starts with <samp>#include</samp>.</p> <p>To compile a C program, use: <samp>gcc program.c -o program</samp></p> </body> </html>
The output displays the sample code in monospace font −
The header file always starts with #include. To compile a C program, use: gcc program.c -o program
Using Samp for Command Output
The <samp> tag is particularly useful for showing command-line outputs, error messages, or system responses.
Example − Command Line Output
<!DOCTYPE html>
<html>
<head>
<title>Command Output Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<p>When you run the <code>ls -l</code> command, you might see output like:</p>
<samp>
-rw-r--r-- 1 user staff 1024 Oct 15 10:30 file.txt<br>
drwxr-xr-x 5 user staff 160 Oct 15 09:15 documents
</samp>
<p>A typical error message might look like: <samp>File not found: config.xml</samp></p>
</body>
</html>
The output shows command results and error messages in monospace format −
When you run the ls -l command, you might see output like: -rw-r--r-- 1 user staff 1024 Oct 15 10:30 file.txt drwxr-xr-x 5 user staff 160 Oct 15 09:15 documents A typical error message might look like: File not found: config.xml
Styling the Samp Tag
You can customize the appearance of the <samp> tag using CSS to change colors, background, or other visual properties.
Example − Styled Sample Output
<!DOCTYPE html>
<html>
<head>
<title>Styled Samp Tag</title>
<style>
.terminal-output {
background-color: #1e1e1e;
color: #00ff00;
padding: 10px;
border-radius: 4px;
font-family: 'Courier New', monospace;
}
.error-output {
background-color: #ffe6e6;
color: #cc0000;
padding: 5px;
border-left: 3px solid #cc0000;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<p>Terminal output:</p>
<samp class="terminal-output">$ node app.js<br>Server running on port 3000</samp>
<p>Error message:</p>
<samp class="error-output">Error: Cannot connect to database</samp>
</body>
</html>
The styled output creates visual distinction between different types of sample content −
Terminal output: $ node app.js (green text on black background) Server running on port 3000 Error message: Error: Cannot connect to database (red text with red left border)
Comparison with Related Tags
HTML provides several tags for marking up computer-related content. Here are the key differences −
| Tag | Purpose | Use Case |
|---|---|---|
| <samp> | Sample output from programs | Command results, error messages, program responses |
| <code> | Source code fragments | Function names, variable names, code snippets |
| <kbd> | Keyboard input from user | Key combinations, commands typed by user |
| <pre> | Preformatted text blocks | Multi-line code, ASCII art, formatted output |
Complete Example with Multiple Elements
Following example demonstrates the proper usage of <samp> alongside other computer-related tags −
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Elements</title>
<style>
kbd { background: #f0f0f0; padding: 2px 4px; border-radius: 3px; }
samp { background: #f8f8f8; padding: 1px 3px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Git Command Tutorial</h2>
<p>To check your Git status, type: <kbd>git status</kbd></p>
<p>You might see output like: <samp>On branch main<br>Your branch is up to date</samp></p>
<p>The <code>git add</code> command stages files for commit.</p>
<p>Press <kbd>Ctrl+C</kbd> to cancel the current operation.</p>
</body>
</html>
The output clearly distinguishes between user input, program output, and code references −
Git Command Tutorial
To check your Git status, type: git status (styled as keyboard input)
You might see output like: On branch main (styled as program output)
Your branch is up to date
The git add command stages files for commit. (git add styled as code)
Press Ctrl+C to cancel the current operation. (styled as keyboard input)
Conclusion
The <samp> tag is specifically designed for displaying sample computer output, error messages, or any text that represents what a computer program would produce. Use it alongside <code> for source code and <kbd> for user input to create clear, semantically correct documentation of computer interactions.
211 Views
