HTML Tutorial

HTML Tag: <kbd>

Purpose

The <kbd> tag represents a key or sequence of keys pressed on a keyboard. It is used to display keyboard input or commands within a text.

Usage

To use the <kbd> tag, simply enclose the text representing the keyboard input within the opening and closing <kbd> tags:

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Attributes

The <kbd> tag supports the following attributes:

  • accesskey: Specifies a keyboard shortcut for the element.
  • title: Provides a tooltip for the element.

Examples

  • Displaying a simple keyboard shortcut:
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
  • Setting an access key:
<kbd accesskey="C">Copy</kbd>
  • Providing a tooltip:
<kbd title="Copy selected text">Ctrl + C</kbd>

Exploring the <kbd> Tag

To better understand how the <kbd> tag works, consider the following HTML example:

<p>To copy the selected text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

When rendered in a web browser, this code will display the text "To copy the selected text, press Ctrl + C." with the "Ctrl" and "C" characters enclosed within <kbd> tags. This indicates to the user that these keys need to be pressed on the keyboard to perform the copy action.