HTML <kbd> Tag

The <kbd> tag in HTML is used to represent user input from a keyboard. It is primarily used to indicate text that a user is expected to enter, or text that the user has entered. This tag is useful for creating tutorials, documentation, and any situation where you need to show keyboard commands or input.

Syntax

<kbd>keyboard input text</kbd>

Attributes

The <kbd> tag does not support any specific attributes. It's a simple tag intended for semantic markup of keyboard input.

Example

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

More Examples

Basic Input Example:

<p>Enter your username: <kbd>john_doe</kbd></p>

This example shows a basic username input that can be expected by the user or have been entered by him.

Complex Command Example:

<p>To open the command palette, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>.</p>

This is a more complex command that involves multiple keys being pressed simultaneously. The <kbd> tag clearly separates each key for clarity.

Input with Text:

<p>Type <kbd>cd my_folder</kbd> in the terminal and press <kbd>Enter</kbd>.</p>

This is an example of a typical command-line input example, it involves both command and finalising input key.

Using within other tags

<p>The code snippet below can be executed using:
    <code>
        <kbd>python</kbd>
        <kbd>your_script.py</kbd>
   </code>
</p>

This example shows how <kbd> tag can be used within other tags to properly structure and visualise code or command snippets.

Browser Support

The <kbd> tag is supported by all modern browsers, including:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <kbd> tag is primarily a semantic tag, so it is best used for marking up text that represents keyboard input.
• By default, browsers display the text inside <kbd> in the browser's default monospace font, often similar to the font used in a terminal. You can style this using CSS if you need custom appearance.
• Do not use the <kbd> tag to style or provide formatting. Use it solely for its semantic meaning.
• You may want to combine <kbd> with <code> for code snippets that also represent the required command to execute them.
• Ensure that the content inside the <kbd> tag is actually keyboard input, avoid overusing it and maintain accuracy.
• Use <kbd> for individual keys or a complete command string based on the requirement.
• Avoid nesting <kbd> tags if it doesn't make sense logically.