HTML kbd tag
HTML

HTML kbd tag

Mishel Shaji
Mishel Shaji

The kbd tag (HTML Keyboard Input) is used to define a span of inline text denoting textual user input from a keyboard or any other text entry device. Its contents are rendered using the browser’s default monospaced font.

Syntax

<kbd>Some text here</kbd>

This element has only HTML Global attributes.

Example – simple kbd tag

<!DOCTYPE html>
<html>
    <head>
        <title>HTML kbd tag</title>
    </head>
<body>
    <p>Press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Esc</kbd> to start Task manager.</p>
</body>
</html>

Output

Press Ctrl + Alt + Esc to start Task manager.

You can add CSS to get richer effect.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML kbd tag</title>
    <style>
        kbd{
            border: 1px solid black;
            background-color: #F5F5F5;
        }
    </style>
</head>
<body>
    <p>Press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Esc</kbd> to start Task manager.</p>
</body>
</html>

Output

Press Ctrl + Alt + Esc to start Task manager.