Open In App

What's the difference between code, kbd and samp tags?

Last Updated : 07 Jun, 2025
Comments
Improve
Suggest changes
5 Likes
Like
Report

When you're writing HTML code, it's important to use the right tags for the right types of content. Even though <code>, <kbd>, and <samp> might all look similar—thanks to that classic monospace font—they each have a specific job to do.

  • <code>: For Showing Code (JS/HTML/C++ etc)
  • <kbd>: For Showing Keyboard Action (Shortcut keys, User Input, etc.)
  • <samp>: for displaying what the program returns (such as output block, etc.)

These tags are all about making your technical text more meaningful, not just for the eyes, but for accessibility and clarity as well. Understanding when and why to use each one will help keep your code clean, organized, and easy to understand for everyone, from browsers to fellow developers.

1. <code>

The <code> tag is used to display code snippets such as function definitions, variable names, or HTML elements.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code Example</title>
</head>
<body>
    <h1>JavaScript Code</h1>
    <p>Here is a simple piece of JavaScript code:</p>
    <p><code>let x = 5;</code></p>
    <p><code>console.log(x);</code></p>
</body>
</html>
  • The text inside <code> represents a code snippet. This could be any programming language. In this case, it's JavaScript code.

2. <kbd>

The <kbd> tag is used to denote user input, typically from a keyboard.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kbd Example</title>
</head>
<body>
    <h1>Keyboard Shortcuts</h1>
    <p>If you want to copy something, press:</p>
    <p><kbd>Ctrl + C</kbd></p>

    <p>If you want to paste, press:</p>
    <p><kbd>Ctrl + V</kbd></p>
</body>
</html>
  • The text inside <kbd> represents keyboard input. It’s showing what keys you need to press.

3. <samp>

The <samp> tag is used to show output from a computer program or command-line interface.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Samp Example</title>
</head>
<body>
    <h1>Program Output</h1>
    <p>When you run a program, you might see an output like this:</p>
    <p><samp>File not found: document.txt</samp></p>
    <p><samp>Error: Invalid command</samp></p>
</body>
</html>
  • The text inside <samp> tags shows output that might come from a program, like an error or result message. It looks like a program's feedback.

<code> vs. <kbd> vs. <samp>

Tag

Purpose

Common Usage

<code>

Any piece of computer code

Commands, variables, functions

<kbd>

User keyboard/device input

Key presses, shortcuts

<samp>

Sample output from the computer

Terminal responses , log outputs

In below example, we used all these three tags to get better idea how these tag work together.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Combined Example</title>
</head>
<body>
    <h1>Code, Input, and Output</h1>

    <h2>Code Example:</h2>
    <p>Here’s the code to calculate the sum of two numbers:</p>
    <p><code>let a = 5;</code></p>
    <p><code>let b = 10;</code></p>
    <p><code>let sum = a + b;</code></p>

    <h2>What You Should Type (Input):</h2>
    <p>To run the program, type:</p>
    <p><kbd>let a = 5;</kbd></p>
    <p><kbd>let b = 10;</kbd></p>
    <p><kbd>let sum = a + b;</kbd></p>

    <h2>Program Output:</h2>
    <p>The program will show this output:</p>
    <p><samp>15</samp></p>
</body>
</html>
  • The code (JavaScript) is displayed with <code>.
  • The input (what the user types) is shown with <kbd>.
  • The output (what the program shows after running the code) is shown with <samp>.

Conclusion

At first glance, <code>, <kbd>, and <samp> might all look the same—but in the world of HTML, meaning matters just as much as appearance. These tags help you clearly tell the browser (and your readers) what's code, what's user input, and what's output from a program.

The use of the proper tag is not so much about being perfect, but rather about coding cleaner, more considerate HTML that is easier to understand, maintain, and use for everyone. It's the little thing that makes a big difference when you're creating something to last.


I

ishans2pmz
Improve
Article Tags :

Explore

Lightbox