Tag kbd

The kbd tag represents user input, typically text typed from a keyboard. It is used to semantically mark up keyboard input or commands in documentation, tutorials, and user interfaces.

---

🔧 Syntax:

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

---

🧩 Typical Use Cases:

• Indicating keyboard shortcuts or key presses
• Highlighting user input in instructions or command lines
• Showing keys to press in software guides

---

✅ Example:

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

This will usually render the keys in a monospace font with some default styling (often a slightly raised box or inline code style).

---

🖌️ Styling:

Browsers typically style <kbd> similar to <code>, but you can customize it with CSS, for example:

kbd {
  background-color: #eee;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
  padding: 2px 4px;
  font-family: monospace;
  font-size: 0.9em;
}

---

Accessibility:

Using <kbd> helps screen readers and assistive technologies understand that the content represents user input, improving semantic clarity.

---