HTML <kbd> Tag

The <kbd> tag in HTML is used to represent keyboard input or keyboard shortcuts. It displays text in a way that indicates the user should press a key or combination of keys.

<kbd> tag is used to show keyboard input in HTML.
It is commonly used for shortcut keys and commands.
Browsers usually display <kbd> text in a monospace font style.

Syntax:

<kbd> text content ... </kbd>

List of all phrase tag:

<em>: <em> is used to emphasize the text.
<strong>: <strong> is used to define an important text.
<code>: <code> encloses the computer code.
<samp>: <samp> defines a sample output text from a computer program.
<kbd>: <kbd> defines the text of keyboard input.
<var>: <var> defines the variable text.

Example 1: This example describe the use of <kbd> tag.

html

<!DOCTYPE html>
<html>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>HTML kbd Tag</h3>


    <p>
        Open a new window using the
        keyboard shortcut
        <kbd>Ctrl</kbd> + <kbd>N</kbd>
    </p>

</body>

</html>

Example 2: This example using <kbd> tag with some CSS styles.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        kbd {
            border-radius: 2px;
            padding: 2px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>HTML kbd Tag</h2>


    <p>Open a new window using the
        keyboard shortcut
        <kbd>Ctrl</kbd>+<kbd>N</kbd>
    </p>

</body>

</html>

Explore