HTML kbd Tag: How to Show Keyboard Input with examples

The HTML<kbd> tag shows the keys that a user must press. This helps you to give instructions for commands or shortcuts. It is common in guides where you explain steps for tools or games.

Understand the <kbd> Tag in HTML

The <kbd> tag marks text as keyboard input in HTML. It is inline and appears inside normal text. Browsers usually display it in monospace style.

Here is the basic tag:

<kbd>Key</kbd>

It wraps the name of the key inside the tag. Here is a quick example:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

The keys are shown inside the kbd element to highlight them as input.

Here are the browsers that support the <kbd> tag:

• Chrome
• Firefox
• Safari
• Edge,
• Opera

The <kbd> works in most mobile browsers.

How to Style the <kbd> Tag in HTML with CSS

You can use CSS to change how keys look on the screen. Borders and padding can make them look like real keys in CSS.

Here is an example:

<style>
kbd {
  border: 1px solid #000;
  padding: 3px 5px;
  border-radius: 3px;
  background: #eee;
}
</style>
<p>Use <kbd>Alt</kbd> + <kbd>Tab</kbd> to switch windows.</p>

This adds custom styles to the <kbd> element. Here is an image that shows you that:

Nest the HTML<kbd> Tag Inside Other Tags

You can place the <kbd> inside many elements:

• Paragraphs
• Headings
• Tables
• Lists

Here is an example:

<p>Click <strong>Options</strong> and press <kbd>F10 to open the menu</kbd>.</p>

The Differences Between kbd Tag and Samp Tags

The<kbd> element shows what the user must type, while the<samp> element displays text that a program outputs.

Here is a table that shows you the key differences between them:

The use case:

• kbd shows shortcuts or typed commands.
• samp shows results from a program.

Examples

Copy Shortcut:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy selected text.</p>

This example shows a key combination that copies text in most systems.

List of Shortcuts:

<ul>
  <li>New Tab: <kbd>Ctrl</kbd> + <kbd>T</kbd></li>
  <li>Close Tab: <kbd>Ctrl</kbd> + <kbd>W</kbd></li>
</ul>

The multiple shortcuts are listed, each with its own kbd tags.

Wrapping Up

You learned how the kbd tag works and how to style it in this article. You also saw how to use it inside other tags and how it differs from samp.

Here is a quick recap:

• The <kbd> tag marks text as user key input; you can style it with CSS.
• It works in all browsers.

FAQs

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<style>
kbd {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 2px 4px;
  border-radius: 3px;
}
</style>
<p>Press <kbd>Enter</kbd> to continue.</p>

<p>Use <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Example of code: <code>print("Hello")</code></p>

<p>To refresh the page press <kbd>F5</kbd>.</p>

Similar Reads