htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Approved-page light CSS-variable defaults are supplied: --text-primary. The snippet includes CSS inside its HTML.

<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

Approved-page light CSS-variable defaults are supplied: --text-primary. Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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)