HTML Computer Code
Displaying code and computer text
💻 Computer Code Elements
HTML provides special elements for displaying computer code, keyboard input, and program output with proper formatting.
<code>console.log("Hello World");</code>
Code Elements
<code>
Inline code snippets
<code>alert("Hi");</code><pre>
Preformatted text blocks
<pre>
function hello() {
return "Hi!";
}
</pre><kbd>
Keyboard input
<kbd>Ctrl+C</kbd><samp>
Sample output
<samp>Error 404</samp>🔹 Inline Code with <code>
Use <code> for short code snippets within text:
<p>Use the <code>console.log()</code> function to print messages.</p>
<p>The <code>document.getElementById()</code> method finds elements.</p>Output:
Use the
console.log()
function to print messages.
The
document.getElementById()
method finds elements.
🔹 Code Blocks with <pre>
Use <pre> for multi-line code that keeps formatting:
<pre>
function greet(name) {
if (name) {
return "Hello, " + name + "!";
} else {
return "Hello, World!";
}
}
</pre>Output:
function greet(name) {
if (name) {
return "Hello, " + name + "!";
} else {
return "Hello, World!";
}
}
🔹 Keyboard Input with <kbd>
Show keyboard shortcuts and keys:
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Use <kbd>F12</kbd> to open developer tools.</p>
<p>Type <kbd>cd Documents</kbd> in the terminal.</p>Output:
Press Ctrl + S to save.
Use F12 to open developer tools.
Type cd Documents in the terminal.
🔹 Sample Output with <samp>
Display computer output or results:
<p>The program returned: <samp>Success: File saved</samp></p>
<p>Console output: <samp>Hello, World!</samp></p>
<p>Error message: <samp>404 - Page not found</samp></p>Output:
The program returned: Success: File saved
Console output: Hello, World!
Error message: 404 - Page not found