<kbd>-Keyboard input translates this sentence into English, output only plain text, do not output any other content

The <kbd> tag in HTML is used to represent keyboard input, typically employed in documentation or tutorials to display keys or key combinations that users need to press. By default, it is rendered in a monospace font and may include additional styling (such as borders or background colors) to distinguish it from regular text.

Basic Usage of <kbd>

The <kbd> tag is commonly used to mark individual keys or key combinations on a keyboard. Browsers typically render it in a monospace font, and some browsers may add a light gray background or border. For example:

<p>To save the file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Rendered effect:

To save the file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.

Nesting <kbd> for Key Combinations

When representing key combinations, multiple <kbd> tags can be used side by side or nested to indicate hierarchical relationships. For example:

<!-- Side-by-side usage -->
<p>To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

<!-- Nested usage -->
<p>On Mac, to take a screenshot, press <kbd><kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>4</kbd></kbd></p>

Rendered effect:

To copy text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>
On Mac, to take a screenshot, press <kbd><kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>4</kbd></kbd>

Combining with Other Semantic Tags

The <kbd> tag is often used alongside <code> or <samp> tags to differentiate between keyboard input, code, and program output:

<p>After entering <kbd>git status</kbd> in the terminal, you might see:</p>
<samp>
  On branch main<br>
  Your branch is up to date with 'origin/main'.
</samp>

Rendered effect:

After entering <kbd>git status</kbd> in the terminal, you might see:
<samp> On branch main<br> Your branch is up to date with 'origin/main'. </samp>

Custom Styling

Although browsers provide default styling, you can fully customize the appearance using CSS. Here’s an example of enhanced styling:

<style>
  kbd {
    padding: 2px 6px;
    border: 1px solid #ccc;
    background: linear-gradient(#f9f9f9, #e0e0e0);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-family: monospace;
  }
  kbd kbd { /* Styles for nested elements */
    padding: 1px 4px;
    box-shadow: none;
  }
</style>

<p>Restart shortcut: <kbd><kbd>Alt</kbd> + <kbd>F2</kbd></kbd></p>

Rendered effect (requires actual execution to view):

Restart shortcut: <kbd><kbd>Alt</kbd> + <kbd>F2</kbd></kbd>

Complex Use Case Examples

Representing Menu Navigation Paths

<p>
  File export path:
  <kbd>File</kbd> → <kbd>Export</kbd> → <kbd>PDF</kbd>
</p>

Rendered effect:

File export path:
<kbd>File</kbd> → <kbd>Export</kbd> → <kbd>PDF</kbd>

Game Control Instructions

<div class="game-controls">
  <p>Movement: <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></p>
  <p>Attack: <kbd>Space</kbd></p>
  <p>Skills: <kbd>Q</kbd> <kbd>E</kbd> <kbd>R</kbd></p>
</div>

Accessibility Recommendations

To improve accessibility, it’s recommended to add aria-label to <kbd>:

<kbd aria-label="Control key">Ctrl</kbd>

Screen readers will explicitly announce this as a keyboard key.

Integration with Other Technologies

Dynamic Key Highlighting

Use JavaScript to provide visual feedback for pressed keys:

<script>
  document.addEventListener('keydown', (e) => {
    const keyElement = document.getElementById(`key-${e.key.toUpperCase()}`);
    if (keyElement) keyElement.style.background = '#ff0';
  });
  document.addEventListener('keyup', (e) => {
    const keyElement = document.getElementById(`key-${e.key.toUpperCase()}`);
    if (keyElement) keyElement.style.background = '';
  });
</script>

<p>Try pressing <kbd id="key-A">A</kbd> or <kbd id="key-ENTER">Enter</kbd></p>