<kbd> : Keyboard Input element

by

Introduction

The <kbd> element in HTML is used to define keyboard input. It represents user input as it would be entered by the user from the keyboard. The content within the <kbd> element is typically displayed in a way that indicates it represents keyboard input, such as using a monospaced font.

Here’s an example of how the <kbd> element can be used:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <p>
      To save a document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.
    </p>
</body>
</html>

Output :

In this example, the keyboard shortcut for saving a document is presented with the key combinations enclosed in <kbd> tags. The rendering of the content within <kbd> may vary depending on the browser, but it’s often displayed in a way that resembles the appearance of keys on a keyboard.

Attributes like “for” can be used to associate the <kbd> element with a specific input element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <label for="search-input">Search:</label>
    <input type="text" id="search-input" name="search">
    <button><kbd>Enter</kbd></button>
</body>
</html>

Output :

In this example, the <kbd> element is associated with the “Enter” key, indicating that pressing the “Enter” key is equivalent to clicking the associated button.

The <kbd> element is useful when documenting keyboard shortcuts, providing clarity to users about which keys or key combinations they should press. It is often used in technical documentation, tutorials, and user manuals where keyboard input instructions need to be conveyed.

Leave a Comment