<kbd> - The Keyboard Input Element

The `<kbd>` Element

Inline HTML 2.0

The keyboard input element represents user input from a keyboard, voice input, or any other text entry device. It’s typically displayed in a monospace font.

Quick Example

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

Syntax

<kbd>keyboard input</kbd>

The <kbd> element represents text that the user should type or input.

Common Use Cases

Keyboard Shortcuts

<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save your work.</p>
<p>Use <kbd>Ctrl</kbd>+<kbd>Z</kbd> to undo and <kbd>Ctrl</kbd>+<kbd>Y</kbd> to redo.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save your work.</p>
<p>Use <kbd>Ctrl</kbd>+<kbd>Z</kbd> to undo and <kbd>Ctrl</kbd>+<kbd>Y</kbd> to redo.</p>

Single Key Inputs

<p>Press <kbd>Enter</kbd> to submit the form.</p>
<p>Hit <kbd>Esc</kbd> to close the dialog.</p>
<p>Press <kbd>F11</kbd> for fullscreen mode.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Press <kbd>Enter</kbd> to submit the form.</p>
<p>Hit <kbd>Esc</kbd> to close the dialog.</p>
<p>Press <kbd>F11</kbd> for fullscreen mode.</p>

Command Line Input

<p>Type <kbd>npm install</kbd> to install dependencies.</p>
<p>Run <kbd>git status</kbd> to check repository status.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Type <kbd>npm install</kbd> to install dependencies.</p>
<p>Run <kbd>git status</kbd> to check repository status.</p>

Text Input

<p>Type <kbd>yes</kbd> to confirm or <kbd>no</kbd> to cancel.</p>
<p>Enter <kbd>admin</kbd> as the username.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Type <kbd>yes</kbd> to confirm or <kbd>no</kbd> to cancel.</p>
<p>Enter <kbd>admin</kbd> as the username.</p>

<p>Navigate using arrow keys: <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd></p>
<p>Press <kbd>Tab</kbd> to move to the next field.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Navigate using arrow keys: <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd></p>
<p>Press <kbd>Tab</kbd> to move to the next field.</p>

Function Keys

<ul>
<li><kbd>F1</kbd> - Help</li>
<li><kbd>F5</kbd> - Refresh</li>
<li><kbd>F12</kbd> - Developer tools</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li><kbd>F1</kbd> - Help</li>
<li><kbd>F5</kbd> - Refresh</li>
<li><kbd>F12</kbd> - Developer tools</li>
</ul>

Complex Key Combinations

Multiple Modifiers

<p>Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen closed tab.</p>
<p>Use <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>Esc</kbd> on Mac to force quit.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen closed tab.</p>
<p>Use <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>Esc</kbd> on Mac to force quit.</p>

Sequential Keys

<p>First press <kbd>Alt</kbd>, then <kbd>F</kbd>, then <kbd>O</kbd> to open File menu.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>First press <kbd>Alt</kbd>, then <kbd>F</kbd>, then <kbd>O</kbd> to open File menu.</p>

Nested `<kbd>` for Combination

You can nest <kbd> elements to show key combinations:

<p>Save: <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>
<p>Copy: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Save: <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>
<p>Copy: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd></p>

Technical Input Elements

<!-- User keyboard/input -->
<p>Press <kbd>Enter</kbd> to continue.</p>

<!-- Computer code -->
<p>Use the <code>console.log()</code> function.</p>

<!-- Computer output -->
<p>Output: <samp>Process complete</samp></p>

<!-- Variables -->
<p>The value of <var>x</var> is 10.</p>

Styling

Customize keyboard input appearance:

<style>
kbd {
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.9em;
}
</style>

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

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
kbd {
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.9em;
}
</style>

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

Mac vs Windows Style

<style>
.mac kbd { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.windows kbd { font-family: 'Segoe UI', Tahoma, sans-serif; }
</style>

<div class="mac">
<p>Mac: <kbd>⌘</kbd>+<kbd>C</kbd> to copy</p>
</div>
<div class="windows">
<p>Windows: <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.mac kbd { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.windows kbd { font-family: 'Segoe UI', Tahoma, sans-serif; }
</style>

<div class="mac">
<p>Mac: <kbd>⌘</kbd>+<kbd>C</kbd> to copy</p>
</div>
<div class="windows">
<p>Windows: <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy</p>
</div>

Button-Like Keys

<style>
.key-button kbd {
  display: inline-block;
  background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 0 2px;
  font-weight: 600;
  box-shadow: 0 2px 0 #bbb, 0 3px 2px rgba(0,0,0,0.2);
}
.key-button kbd:active {
  box-shadow: 0 1px 0 #bbb;
  transform: translateY(2px);
}
</style>

<div class="key-button">
<p>Press <kbd>Space</kbd> to jump.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.key-button kbd {
  display: inline-block;
  background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 0 2px;
  font-weight: 600;
  box-shadow: 0 2px 0 #bbb, 0 3px 2px rgba(0,0,0,0.2);
}
.key-button kbd:active {
  box-shadow: 0 1px 0 #bbb;
  transform: translateY(2px);
}
</style>

<div class="key-button">
<p>Press <kbd>Space</kbd> to jump.</p>
</div>

Real-World Examples

Keyboard Shortcuts Guide

<table>
<tr>
  <th>Action</th>
  <th>Shortcut</th>
</tr>
<tr>
  <td>Save</td>
  <td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
</tr>
<tr>
  <td>Print</td>
  <td><kbd>Ctrl</kbd>+<kbd>P</kbd></td>
</tr>
<tr>
  <td>Find</td>
  <td><kbd>Ctrl</kbd>+<kbd>F</kbd></td>
</tr>
</table>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<tr>
  <th>Action</th>
  <th>Shortcut</th>
</tr>
<tr>
  <td>Save</td>
  <td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
</tr>
<tr>
  <td>Print</td>
  <td><kbd>Ctrl</kbd>+<kbd>P</kbd></td>
</tr>
<tr>
  <td>Find</td>
  <td><kbd>Ctrl</kbd>+<kbd>F</kbd></td>
</tr>
</table>

Installation Instructions

<ol>
<li>Open Terminal</li>
<li>Type <kbd>cd ~/projects</kbd> and press <kbd>Enter</kbd></li>
<li>Run <kbd>npm init</kbd> to create a new project</li>
<li>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to exit when done</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<ol>
<li>Open Terminal</li>
<li>Type <kbd>cd ~/projects</kbd> and press <kbd>Enter</kbd></li>
<li>Run <kbd>npm init</kbd> to create a new project</li>
<li>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to exit when done</li>
</ol>

Game Controls

<h4>Game Controls</h4>
<ul>
<li><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> - Move</li>
<li><kbd>Space</kbd> - Jump</li>
<li><kbd>E</kbd> - Interact</li>
<li><kbd>Esc</kbd> - Pause menu</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<h4>Game Controls</h4>
<ul>
<li><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> - Move</li>
<li><kbd>Space</kbd> - Jump</li>
<li><kbd>E</kbd> - Interact</li>
<li><kbd>Esc</kbd> - Pause menu</li>
</ul>

Help Documentation

<section>
<h4>Quick Tips</h4>
<dl>
  <dt>Zoom in</dt>
  <dd><kbd>Ctrl</kbd>+<kbd>+</kbd></dd>

  <dt>Zoom out</dt>
  <dd><kbd>Ctrl</kbd>+<kbd>-</kbd></dd>

  <dt>Reset zoom</dt>
  <dd><kbd>Ctrl</kbd>+<kbd>0</kbd></dd>
</dl>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h4>Quick Tips</h4>
<dl>
  <dt>Zoom in</dt>
  <dd><kbd>Ctrl</kbd>+<kbd>+</kbd></dd>

  <dt>Zoom out</dt>
  <dd><kbd>Ctrl</kbd>+<kbd>-</kbd></dd>

  <dt>Reset zoom</dt>
  <dd><kbd>Ctrl</kbd>+<kbd>0</kbd></dd>
</dl>
</section>

With System Output

Combine with <samp> to show command and output:

<p>Command: <kbd>whoami</kbd></p>
<p>Output: <samp>username</samp></p>

<p>Command: <kbd>pwd</kbd></p>
<p>Output: <samp>/home/user/documents</samp></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Command: <kbd>whoami</kbd></p>
<p>Output: <samp>username</samp></p>

<p>Command: <kbd>pwd</kbd></p>
<p>Output: <samp>/home/user/documents</samp></p>

Accessibility

Screen readers may announce <kbd> content as keyboard input, helping users understand they should type this text.

<p>Hit the key to save.</p>

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

Platform-Specific Shortcuts

Provide alternatives for different operating systems:

<p>
  Save:
  <kbd>Ctrl</kbd>+<kbd>S</kbd> (Windows/Linux)
  or <kbd>⌘</kbd>+<kbd>S</kbd> (Mac)
</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <kbd> element has been supported since the earliest browsers.

 For computer code and programming.
Learn more →

     
 For sample computer output.
Learn more →
 
     
 For variables in code or math.
Learn more →

 
Specifications
Section titled “Specifications”

WHATWG HTML Living Standard
MDN Web Docs

     
     Previous 
 <ins> - The Inserted Text Element      Next 
 <mark> - The Mark Text Element

<kbd> - The Keyboard Input Element

The <kbd> Element

Quick Example

Syntax

Common Use Cases

Keyboard Shortcuts

Single Key Inputs

Command Line Input

Text Input

Menu Navigation

Function Keys

Complex Key Combinations

Multiple Modifiers

Sequential Keys

Nested <kbd> for Combination

Technical Input Elements

Styling

Mac vs Windows Style

Button-Like Keys

Real-World Examples

Keyboard Shortcuts Guide

Installation Instructions

Game Controls

Help Documentation

With System Output

Accessibility

Screen Reader Behavior

Be Clear and Specific

Platform-Specific Shortcuts

Browser Support

Related Elements

Specifications

The `<kbd>` Element

Nested `<kbd>` for Combination