← Back to All Tags

<kbd>

Indicates keyboard input notation

Definition and Usage

The <kbd> tag is used to define keyboard input. It represents text that the user should type on a keyboard.

This semantic tag helps distinguish keyboard input from other types of content like code, sample output, or user-entered text. It's particularly useful in documentation, tutorials, and help systems.

Browsers typically display the content of the <kbd> tag in a monospace font, making it visually distinct from regular text.

Tip: Use <kbd> to represent keyboard keys, keyboard shortcuts, or any text that users should type.
Note: The <kbd> tag is a semantic element that helps screen readers and search engines understand your content better.

Browser Support

The <kbd> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <kbd> tag supports the Global Attributes in HTML.

The <kbd> tag also supports the Event Attributes in HTML.

The <kbd> tag does not have any specific attributes. It only supports global and event attributes common to all HTML elements.

Examples

Single Key

Represent a single keyboard key:

Example

<p>Press <kbd>Enter</kbd> to submit the form.</p>

<p>Press <kbd>Esc</kbd> to cancel the operation.</p>

<p>Press <kbd>F5</kbd> to refresh the page.</p>

Key Combinations

Show keyboard shortcuts with multiple keys:

Example

<p>Save your work: <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

<p>Copy text: <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

<p>Paste text: <kbd>Ctrl</kbd> + <kbd>V</kbd></p>

<p>Undo: <kbd>Ctrl</kbd> + <kbd>Z</kbd></p>

Keyboard Shortcuts Documentation

Create a keyboard shortcuts reference guide:

Example

<h3>Text Editor Shortcuts</h3>
<ul>
  <li><kbd>Ctrl</kbd> + <kbd>N</kbd> - New file</li>
  <li><kbd>Ctrl</kbd> + <kbd>O</kbd> - Open file</li>
  <li><kbd>Ctrl</kbd> + <kbd>S</kbd> - Save file</li>
  <li><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> - Save as</li>
  <li><kbd>Ctrl</kbd> + <kbd>P</kbd> - Print</li>
  <li><kbd>Alt</kbd> + <kbd>F4</kbd> - Close window</li>
</ul>

Nested Kbd Elements

Use nested <kbd> tags for complex key combinations:

Example

<!-- Outer kbd represents the whole input, inner kbd represents individual keys -->
<p>To select all text, press <kbd><kbd>Ctrl</kbd>+<kbd>A</kbd></kbd>.</p>

<p>Force quit on Mac: <kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>Esc</kbd></kbd></p>

Styled Keyboard Input

Add custom styling to keyboard elements:

Example

<style>
  kbd {
    background-color: #eee;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.2),
                0 0 0 2px #fff inset;
    color: var(--text-primary);
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
  }

  kbd.dark {
    background-color: var(--text-primary);
    border: 1px solid #000;
    color: #fff;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5),
                0 0 0 2px #555 inset;
  }
</style>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Or use <kbd class="dark">Command</kbd> + <kbd class="dark">C</kbd> on Mac.</p>

Documentation with Keyboard Input

Create comprehensive user documentation:

Example

<article>
  <h2>Getting Started Guide</h2>

  <section>
    <h3>Navigation</h3>
    <p>Use the arrow keys (<kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd>) to move around.</p>
    <p>Press <kbd>Tab</kbd> to move to the next field.</p>
    <p>Press <kbd>Shift</kbd> + <kbd>Tab</kbd> to move to the previous field.</p>
  </section>

  <section>
    <h3>Editing</h3>
    <p>Type your content and press <kbd>Enter</kbd> to create a new line.</p>
    <p>Press <kbd>Backspace</kbd> to delete the character before the cursor.</p>
    <p>Press <kbd>Delete</kbd> to remove the character after the cursor.</p>
  </section>
</article>

Platform-Specific Shortcuts

Document different shortcuts for different platforms:

Example

<h3>Copy and Paste Shortcuts</h3>

<h4>Windows/Linux:</h4>
<ul>
  <li>Copy: <kbd>Ctrl</kbd> + <kbd>C</kbd></li>
  <li>Paste: <kbd>Ctrl</kbd> + <kbd>V</kbd></li>
  <li>Cut: <kbd>Ctrl</kbd> + <kbd>X</kbd></li>
</ul>

<h4>macOS:</h4>
<ul>
  <li>Copy: <kbd>⌘ Cmd</kbd> + <kbd>C</kbd></li>
  <li>Paste: <kbd>⌘ Cmd</kbd> + <kbd>V</kbd></li>
  <li>Cut: <kbd>⌘ Cmd</kbd> + <kbd>X</kbd></li>
</ul>

Try it Yourself

Interactive Example

Common keyboard shortcuts you can try:

Save: Ctrl + S

Undo: Ctrl + Z

Find: Ctrl + F

Select All: Ctrl + A

Related Semantic Tags Comparison

Understanding the difference between semantic text tags:

Tag Purpose Use Case Default Style
<kbd> Keyboard input Keys the user should press Monospace font
<code> Computer code Programming code, HTML tags, file names Monospace font
<samp> Sample output Output from computer programs Monospace font
<var> Variable Mathematical expressions, programming variables Italic font
Example: "Press <kbd>Enter</kbd> to run <code>python script.py</code>. The output will be <samp>Hello World</samp> where <var>x</var> equals 5."

Styling Keyboard Elements

Here are some popular CSS styles for keyboard elements:

Modern Style

kbd {
  background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2),
              inset 0 0 0 2px #fff;
  color: var(--text-primary);
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 2px;
  padding: 2px 6px;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}

macOS Style

kbd {
  background-color: #fafafa;
  border: 1px solid #d4d4d4;
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 0 #b5b5b5;
  color: #444;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1;
  min-width: 1.5em;
  padding: 3px 6px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}

Best Practices

  • Use <kbd> specifically for keyboard input that users should type
  • Separate multiple keys in a shortcut with a visible separator (e.g., +, -, or spaces)
  • Style keyboard elements to make them stand out from regular text
  • Be consistent with key naming conventions (e.g., "Enter" vs "Return", "Ctrl" vs "Control")
  • Consider platform differences when documenting shortcuts (Windows vs Mac)
  • Use proper capitalization for key names (e.g., "Shift", not "shift")
  • For complex shortcuts, consider using nested <kbd> elements
  • Combine with other semantic tags when appropriate (e.g., <code> for commands)

Accessibility Considerations

  • Screen readers will announce <kbd> content as keyboard input
  • Ensure sufficient color contrast between kbd elements and background
  • Don't rely solely on visual styling - the semantic meaning is important
  • Provide text alternatives for special characters or symbols in key names
  • Consider adding ARIA labels for complex keyboard combinations

Default CSS Settings

Most browsers will display the <kbd> element with the following default values:

Default CSS

kbd {
  font-family: monospace;
}

Related Tags

  • <code>

    Defines a piece of computer code

  • <samp>

    Defines sample output

  • <var>

    Defines a variable

  • <pre>

    Defines preformatted text

  • <abbr>

    Defines an abbreviation

  • <tt>

    Defines teletype text (deprecated)