Path // www.yourhtmlsource.com → Reference → <kbd>

<kbd>

by Ross Shannon

The <kbd> element represents user input, typically keyboard input. It can also be used to represent other input methods such as voice commands or menu selections. Browsers usually render this element in a monospace font to distinguish it from regular text.

Clock This page was last updated on 2025-11-17


Syntax

<kbd>user input</kbd>

The element requires both opening and closing tags. The content represents the actual keys or input that the user should type or enter.

Attributes

  • Global attributes - The <kbd> element supports all global attributes such as id, class, style, lang, and dir.

The <kbd> element has no element-specific attributes.

Examples

Single Key Press

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

Key Combination

<p>To save your document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Command Line Input

<p>Type <kbd>npm install</kbd> in your terminal to install dependencies.</p>

Nested with samp for System Output

<p>The system will display <samp>Continue? <kbd>y</kbd>/<kbd>n</kbd></samp></p>

When to Use

Use the <kbd> element when:

  • Documenting keyboard shortcuts or key combinations
  • Writing software tutorials or user guides
  • Showing command-line input that users should type
  • Indicating specific keys or buttons users should press
  • Representing voice commands or other user input methods

Styling tips:

  • Many developers add CSS to make <kbd> look like actual keyboard keys
  • Consider adding borders, shadows, or background colors to enhance visibility
  • Ensure sufficient contrast for accessibility
  • <samp> - For sample output from computer programs
  • <code> - For code fragments
  • <var> - For variables in programming or mathematics
  • <pre> - For preformatted text blocks