HTML <kbd> Tag

The HTML <kbd> tag is used to represent user input, specifically keyboard input. It’s typically used in instructions, tutorials, or any other content where keyboard keys or input sequences are mentioned. By wrapping text in the <kbd> tag, it tells the browser to display that text in a way that indicates its keyboard input, usually by rendering it in a monospace font. 

Syntax of the <kbd> Tag

html
<kbd>Keyboard Input</kbd>

The text wrapped inside the <kbd> tag will be rendered in a monospaced font, making it clear that it's meant to represent user keyboard input.

Attributes of the <kbd> Tag

The <kbd> tag supports several global attributes, allowing customization and styling. However, it doesn't have any specific attributes of its own.

Global Attributes Supported by the <kbd> Tag:

  • class: Specifies a class name for the element, which can be used with CSS.
  • id: Defines a unique identifier for the element.
  • style: Adds inline CSS to style the content within the <kbd> tag.
  • lang: Specifies the language of the content inside the element.
  • tabindex: Specifies the tab order of the element when navigating with the keyboard.

While the <kbd> tag itself does not have unique attributes, these global attributes can be used to enhance its functionality and appearance.

Examples of HTML <kbd> Tag

Example 1: Basic Usage of <kbd> Tag

html
<!DOCTYPE html>
<html>
<head>
    <title>Basic Example of <kbd> Tag</title>
</head>
<body>
    <p>To refresh the page, press <kbd>F5</kbd> on your keyboard.</p>
</body>
</html>

In this example, the user is instructed to press the "F5" key. The text inside the <kbd> tag appears in a monospace font, distinguishing it as keyboard input.

Example 2: Using <kbd> for Key Combinations

html
<!DOCTYPE html>
<html>
<head>
    <title>Key Combination Example</title>
</head>
<body>
    <p>To copy text, use <kbd>Ctrl</kbd> + <kbd>C</kbd> on Windows or <kbd>Cmd</kbd> + <kbd>C</kbd> on Mac.</p>
</body>
</html>

This example shows how the <kbd> tag can be used to represent multiple key combinations, a common use case for tutorials and instructions.

FAQs About HTML <kbd> Tag

Q1: What is the purpose of the HTML <kbd> tag?
A: The <kbd> tag is used to define and display keyboard input in a monospace font, making it clear to users that the text represents keys on a keyboard.

Q2: Can I style the <kbd> tag with CSS?
A: Yes, the <kbd> tag supports all global attributes, including class and style, which allows you to customize its appearance with CSS.

Q3: Is the <kbd> tag only used for keyboard input?
A: While it's primarily used for keyboard input, the <kbd> tag can also represent any user input from devices such as keyboards, voice commands, or other input methods.

Q4: Does the <kbd> tag support any specific attributes?
A: No, the <kbd> tag doesn't have any unique attributes, but it supports all global HTML attributes like id, class, and style.

Q5: Is the <kbd> tag supported across all browsers?
A: Yes, the <kbd> tag is supported by all major browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles