HTML ComputerCode
29 March 2025 | Category: HTML
HTML provides several elements to display programming code or computer-related content in a structured and readable manner. These elements are especially useful for creating tutorials, documentation, or sharing snippets of code.
1. The <code> Element
The <code> element is used to represent a fragment of computer code. It displays text in a monospaced (fixed-width) font to differentiate it from regular text.
Example
<p>The function <code>console.log()</code> is used to print messages to the console.</p>
Output
The function console.log() is used to print messages to the console.
2. The <pre> Element
The <pre> element preserves whitespace, line breaks, and indentation exactly as written in the HTML. It is commonly combined with the <code> element for displaying blocks of code.
Example
<pre>
function greet(name) {
console.log("Hello, " + name + "!");
}
</pre>
Output
function greet(name) {
console.log("Hello, " + name + "!");
}
3. The <kbd> Element
The <kbd> element is used to represent user keyboard input. It is useful for tutorials or instructions.
Example
<p>To save the file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
Output
To save the file, press Ctrl + S.
4. The <samp> Element
The <samp> element is used to represent sample output from a computer program or system.
Example
<p>Program Output: <samp>Hello, World!</samp></p>
Output
Program Output: Hello, World!
5. Highlighting Code with Syntax
By default, HTML does not include syntax highlighting for programming languages. However, you can use CSS or JavaScript libraries, such as Prism.js or Highlight.js, to highlight code.
Example Using Highlight.js
Include the Highlight.js library in your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<pre><code class="language-javascript">
function greet(name) {
console.log("Hello, " + name + "!");
}
</code></pre>
</body>
</html>
Output
This will display syntax-highlighted JavaScript code.
6. Inline Code vs Block Code
Inline Code
Use <code> for small snippets of code inline with regular text.
<p>Use the <code><h1></code> tag to create a top-level heading.</p>
Block Code
Use <pre> and <code> together for blocks of code.
<pre>
<code>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</code>
</pre>
7. Combining CSS for Styling
You can customize the appearance of code blocks with CSS to make them more visually appealing.
Example
<style>
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
overflow-x: auto;
}
code {
font-family: "Courier New", Courier, monospace;
color: #c7254e;
background-color: #f9f2f4;
padding: 2px 4px;
border-radius: 4px;
}
</style>
<pre><code>
function add(a, b) {
return a + b;
}
</code></pre>
8. Example: Full Code Tutorial Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Code Elements</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
overflow-x: auto;
}
code {
font-family: "Courier New", Courier, monospace;
color: #c7254e;
background-color: #f9f2f4;
padding: 2px 4px;
border-radius: 4px;
}
kbd {
background-color: #333;
color: white;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>HTML Code Elements</h1>
<p>Here are some examples of how to use HTML to display code:</p>
<h2>Inline Code</h2>
<p>To create a paragraph, use the <code><p></code> tag.</p>
<h2>Block Code</h2>
<pre><code>
function sayHello() {
console.log("Hello, World!");
}
</code></pre>
<h2>Keyboard Input</h2>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
<h2>Sample Output</h2>
<p>The program output was: <samp>Hello, World!</samp></p>
</body>
</html>
9. Best Practices
- Use semantic elements: Use
<code>,<pre>,<kbd>, and<samp>appropriately. - Preserve readability: Indent your code properly.
- Syntax highlighting: Use libraries like Highlight.js for better visibility.
- Test accessibility: Ensure the code snippets are accessible for screen readers.
Conclusion
HTML offers several ways to display code and computer-related content. Whether you’re writing inline code snippets, showcasing entire programs, or providing user instructions, these elements ensure clarity and structure in your documentation.