HTML 18 💻 code, var, kbd, samp and pre elements - KandZ

These elements are used to display technical content, code, keyboard inputs, variables, and sample output in a semantically meaningful way. They are essential for technical documentation, programming tutorials, and educational content.

Overview of Technical Elements

Element	Purpose	Typical Use
`<code>`	Represents a fragment of computer code	Inline code snippets, programming examples
`<var>`	Represents a variable in mathematics or programming	Variables in equations, programming expressions
`<kbd>`	Represents user keyboard input	Keyboard shortcuts, commands to type
`<samp>`	Represents sample output from a program	Program output, error messages, examples
`<pre>`	Represents preformatted text	Code blocks, preserving whitespace and line breaks

1. The Code Element `<code>`

The <code> element indicates that its content should be treated as computer code.

Basic Syntax:

<p>Here is some <code>HTML</code> code:</p>

Browser Display:
Here is some HTML code:

Key Points:

Used for inline code snippets
Rendered in a monospace font by default
Preserves whitespace only when inside a <pre> element
Can be used for any programming language

Examples:

<p>The <code>console.log()</code> function outputs text to the console.</p>
<p>Use the <code>&lt;html&gt;</code> tag to start an HTML document.</p>
<p>In Python, <code>print("Hello")</code> displays text.</p>

2. The Variable Element `<var>`

The <var> element represents a variable in a mathematical equation or programming expression.

Basic Syntax:

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

Browser Display:
2 + x = 2 + x

Key Points:

Rendered in italic by default
Used for mathematical variables and programming variables
Can be used with <math> for complex equations

Examples:

<p>The equation is <var>E</var> = <var>mc</var><sup>2</sup></p>
<p>In JavaScript, <var>result</var> = <var>a</var> + <var>b</var></p>
<p>Solve for <var>x</var> in the equation 2<var>x</var> + 5 = 13</p>

3. The Keyboard Element `<kbd>`

The <kbd> element represents keyboard input — keys the user should press.

Basic Syntax:

<p>To save your progress, press <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

Browser Display:
To save your progress, press Ctrl + S

Key Points:

Represents user keyboard input
Rendered in a monospace font by default (often with a key-like appearance)
Can be styled to look like physical keys

Examples:

<p>Press <kbd>Enter</kbd> to submit the form.</p>
<p>Use <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
<p>In the terminal, type <kbd>npm install</kbd> and press <kbd>Enter</kbd>.</p>
<p>For undo, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> (Windows) or <kbd>Cmd</kbd> + <kbd>Z</kbd> (Mac).</p>

4. The Sample Element `<samp>`

The <samp> element represents sample output from a program or system.

Basic Syntax:

<samp>The quick brown fox jumps over the lazy dog.</samp>

Browser Display:
The quick brown fox jumps over the lazy dog.

Key Points:

Represents sample output, error messages, or program results
Rendered in monospace font by default
Used to show what the user should expect to see

Examples:

<p>If the installation is successful, you should see:</p>
<samp>Installation complete. (100%)</samp>

<p>When the command fails, you might see:</p>
<samp>Error: File not found: "config.json"</samp>

<p>The program will output:</p>
<samp>Hello, World!<br>Press any key to continue...</samp>

5. The Preformatted Element `<pre>`

The <pre> element represents preformatted text that preserves whitespace and line breaks exactly as written.

Basic Syntax:

<pre>
  <code>
    // this is JavaScript
    function add(x, y) {
      return x + y;
    }
  </code>
</pre>

Browser Display:

  // this is JavaScript
  function add(x, y) {
    return x + y;
  }

Key Points:

Preserves whitespace, line breaks, and indentation
Rendered in a monospace font by default
Often used with <code> to display code blocks
Maintains the exact formatting of the text

Examples:

<pre>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</pre>

<pre>
  #!/bin/bash
  echo "Hello, World!"
</pre>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>code, var, kbd, samp, and pre Elements</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        .example-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin: 15px 0;
        }

        /* ====== CODE STYLES ====== */
        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        pre code {
            background: none;
            padding: 0;
            color: inherit;
        }

        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            line-height: 1.8;
        }

        .language-html .tag { color: #569cd6; }
        .language-html .attribute { color: #9cdcfe; }
        .language-html .value { color: #ce9178; }
        .language-javascript .keyword { color: #c586c0; }
        .language-javascript .function { color: #dcdcaa; }
        .language-javascript .string { color: #ce9178; }
        .language-javascript .comment { color: #6a9955; }
        .language-javascript .number { color: #b5cea8; }

        /* ====== KBD STYLES ====== */
        kbd {
            background: #f4f4f4;
            padding: 3px 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            border-bottom: 3px solid #999;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            box-shadow: 0 2px 0 #bbb;
            background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
        }

        /* ====== VAR STYLES ====== */
        var {
            font-style: italic;
            color: #007bff;
            font-weight: bold;
        }

        /* ====== SAMP STYLES ====== */
        samp {
            font-family: 'Courier New', monospace;
            background: #2d2d2d;
            color: #4ec9b0;
            padding: 2px 8px;
            border-radius: 4px;
            display: inline-block;
        }

        /* ====== TABLE ====== */
        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }
    </style>
</head>
<body>

    <h1>Technical Elements: code, var, kbd, samp, pre</h1>

    <!-- ====== SECTION 1: CODE ====== -->
    <h2>1. The code Element</h2>

    <div class="example-box">
        <h3>Inline Code:</h3>
        <p>
            The <code>console.log()</code> function outputs text to the browser console.
        </p>
        <p>
            Use the <code>&lt;html&gt;</code> tag to start an HTML document.
        </p>
        <p>
            In Python, <code>print("Hello, World!")</code> displays text.
        </p>

        <h3>Code with Preformatted Block:</h3>
        <pre>
            <code>
                // This is a JavaScript function
                function greet(name) {
                    console.log("Hello, " + name + "!");
                }

                greet("World");
            </code>
        </pre>
    </div>

    <!-- ====== SECTION 2: VAR ====== -->
    <h2>2. The var Element</h2>

    <div class="example-box">
        <h3>Mathematical Variables:</h3>
        <p>
            The quadratic formula: <var>x</var> = (-<var>b</var> ± √(<var>b</var>² - 4<var>ac</var>)) / 2<var>a</var>
        </p>
        <p>
            Einstein's equation: <var>E</var> = <var>m</var><var>c</var>²
        </p>

        <h3>Programming Variables:</h3>
        <p>
            In JavaScript: <var>result</var> = <var>a</var> + <var>b</var>
        </p>
        <p>
            In Python: <var>total</var> = <var>price</var> * <var>quantity</var>
        </p>
        <p>
            In HTML: <var>element</var> = document.getElementById("<var>id</var>")
        </p>
    </div>

    <!-- ====== SECTION 3: KBD ====== -->
    <h2>3. The kbd Element</h2>

    <div class="example-box">
        <h3>Keyboard Shortcuts:</h3>
        <p>
            To save your file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>
        </p>
        <p>
            To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>
        </p>
        <p>
            To paste text, press <kbd>Ctrl</kbd> + <kbd>V</kbd>
        </p>
        <p>
            To undo, press <kbd>Ctrl</kbd> + <kbd>Z</kbd>
        </p>

        <h3>Mac Shortcuts:</h3>
        <p>
            To save: <kbd>Cmd</kbd> + <kbd>S</kbd>
        </p>
        <p>
            To copy: <kbd>Cmd</kbd> + <kbd>C</kbd>
        </p>
        <p>
            To paste: <kbd>Cmd</kbd> + <kbd>V</kbd>
        </p>

        <h3>Terminal Commands:</h3>
        <p>
            In the terminal, type <kbd>npm install</kbd> and press <kbd>Enter</kbd>
        </p>
        <p>
            To list files: <kbd>ls -la</kbd>
        </p>
        <p>
            To change directory: <kbd>cd project-folder</kbd>
        </p>
    </div>

    <!-- ====== SECTION 4: SAMP ====== -->
    <h2>4. The samp Element</h2>

    <div class="example-box">
        <h3>Program Output:</h3>
        <p>
            If the installation is successful, you should see:
        </p>
        <samp>Installation complete. (100%)</samp>

        <br><br>

        <p>
            When the command runs successfully:
        </p>
        <samp>Building project...<br>✓ Build completed in 2.3 seconds</samp>

        <h3>Error Messages:</h3>
        <p>
            If the file is missing, you might see:
        </p>
        <samp style="color: #f48771;">Error: File not found: "config.json"</samp>

        <br><br>

        <p>
            If there's a syntax error:
        </p>
        <samp style="color: #f48771;">SyntaxError: Unexpected token '}' at line 15</samp>
    </div>

    <!-- ====== SECTION 5: PRE ====== -->
    <h2>5. The pre Element</h2>

    <div class="example-box">
        <h3>HTML Code Block:</h3>
        <pre>
            &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;
                &lt;meta charset="UTF-8"&gt;
                &lt;title&gt;My Page&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;h1&gt;Hello, World!&lt;/h1&gt;
            &lt;/body&gt;
            &lt;/html&gt;
        </pre>

        <h3>CSS Code Block:</h3>
        <pre>
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
            }

            .button {
                background: #007bff;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            .button:hover {
                background: #0056b3;
            }
        </pre>

        <h3>JavaScript Code Block:</h3>
        <pre>
            // This function calculates the factorial of a number
            function factorial(n) {
                if (n <= 1) return 1;
                return n * factorial(n - 1);
            }

            // Test the function
            const result = factorial(5);
            console.log("Factorial of 5 is:", result); // Output: 120
        </pre>

        <h3>Python Code Block:</h3>
        <pre>
            # This is a Python script
            def greet(name):
                return f"Hello, {name}!"

            def main():
                user_name = input("Enter your name: ")
                print(greet(user_name))

            if __name__ == "__main__":
                main()
        </pre>
    </div>

    <!-- ====== SECTION 6: COMBINED EXAMPLES ====== -->
    <h2>6. Combined Examples</h2>

    <div class="example-box">
        <h3>Programming Tutorial:</h3>
        <p>
            To create a new variable in JavaScript, use the <code>let</code> or <code>const</code> keyword:
        </p>
        <pre>
            <code>
                // Declare a variable
                let <var>name</var> = "John";
                const <var>age</var> = 25;

                // Output to console
                console.log(<var>name</var> + " is " + <var>age</var> + " years old.");
            </code>
        </pre>
        <p>
            Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> to open the browser console.
        </p>
        <p>
            You should see the output:
        </p>
        <samp>John is 25 years old.</samp>

        <h3>Terminal Session:</h3>
        <pre>
            <samp>$</samp> <kbd>git init</kbd>
            <samp>Initialized empty Git repository in /project/.git/</samp>
            <samp>$</samp> <kbd>git add .</kbd>
            <samp>$</samp> <kbd>git commit -m "Initial commit"</kbd>
            <samp>[master (root-commit) a1b2c3d ] Initial commit</samp>
            <samp> 5 files changed, 120 insertions(+)</samp>
        </pre>
    </div>

    <!-- ====== SECTION 7: REFERENCE TABLE ====== -->
    <h2>7. Quick Reference</h2>

    <table class="reference-table">
        <thead>
            <tr>
                <th>Element</th>
                <th>Purpose</th>
                <th>Example</th>
                <th>Default Style</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&lt;code&gt;</code></td>
                <td>Computer code</td>
                <td><code>console.log()</code></td>
                <td>Monospace</td>
            </tr>
            <tr>
                <td><code>&lt;var&gt;</code></td>
                <td>Variable</td>
                <td><var>x</var> = 5</td>
                <td>Italic</td>
            </tr>
            <tr>
                <td><code>&lt;kbd&gt;</code></td>
                <td>Keyboard input</td>
                <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
                <td>Monospace + border</td>
            </tr>
            <tr>
                <td><code>&lt;samp&gt;</code></td>
                <td>Sample output</td>
                <td><samp>Hello, World!</samp></td>
                <td>Monospace</td>
            </tr>
            <tr>
                <td><code>&lt;pre&gt;</code></td>
                <td>Preformatted text</td>
                <td><pre>Line 1\nLine 2</pre></td>
                <td>Monospace, preserves whitespace</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Quick Reference

Element	Purpose	Default Style	When to Use
`<code>`	Code fragment	Monospace	Inline code snippets, programming examples
`<var>`	Variable	Italic	Mathematical equations, programming variables
`<kbd>`	Keyboard input	Monospace + key style	Keyboard shortcuts, terminal commands
`<samp>`	Sample output	Monospace	Program output, error messages
`<pre>`	Preformatted text	Monospace, preserves whitespace	Code blocks, formatted text

Best Practices

✅ Do This:

<!-- Use code for inline code -->
<p>Use <code>console.log()</code> to debug.</p>

<!-- Use var for variables -->
<p>Solve for <var>x</var> in the equation.</p>

<!-- Use kbd for keyboard shortcuts -->
<p>Press <kbd>Ctrl</kbd> + <kbd>Enter</kbd> to submit.</p>

<!-- Use samp for output -->
<p>You should see: <samp>Success!</samp></p>

<!-- Use pre for code blocks -->
<pre>
    <code>
        function add(a, b) {
            return a + b;
        }
    </code>
</pre>

❌ Don’t Do This:

<!-- Don't use code for regular text -->
<p><code>This is just regular text</code></p>

<!-- Don't use var for bold/italic styling -->
<p><var>This is not a variable</var></p>

<!-- Don't use kbd for regular text -->
<p><kbd>This is not a keyboard key</kbd></p>

<!-- Don't use samp for regular text -->
<p><samp>This is not sample output</samp></p>

<!-- Don't use pre for everything -->
<pre>
    <p>This is regular text but wrapped in pre.</p>
</pre>

Styling Tips

/* Make code look like code */
code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
}

/* Make keyboard keys look like keys */
kbd {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: 3px solid #999;
    font-family: 'Courier New', monospace;
    box-shadow: 0 2px 0 #bbb;
}

/* Make variables stand out */
var {
    font-style: italic;
    color: #007bff;
    font-weight: bold;
}

/* Style sample output */
samp {
    font-family: 'Courier New', monospace;
    background: #2d2d2d;
    color: #4ec9b0;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Style code blocks */
pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    line-height: 1.8;
}

Pro Tip: Combine these elements for technical documentation:

<p>
To run the program, type <kbd>node app.js</kbd> in the terminal.
The <var>output</var> variable will contain:
<samp>Hello, World!</samp>
</p>
<pre>
<code>
// Source code
const output = “Hello, World!”;
console.log(output);
</code>
</pre>

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Technical Elements

1. The Code Element <code>

Basic Syntax:

Key Points:

Examples:

2. The Variable Element <var>

Basic Syntax:

Key Points:

Examples:

3. The Keyboard Element <kbd>

Basic Syntax:

Key Points:

Examples:

4. The Sample Element <samp>

Basic Syntax:

Key Points:

Examples:

5. The Preformatted Element <pre>

Basic Syntax:

Key Points:

Examples:

Complete Example

Quick Reference

Best Practices

Styling Tips

Ads Blocker Detected!!!

1. The Code Element `<code>`

2. The Variable Element `<var>`

3. The Keyboard Element `<kbd>`

4. The Sample Element `<samp>`

5. The Preformatted Element `<pre>`