HTML kbd tag

The kbd (HTML Keyboard Input) tag is used to define a span of inline text denoting textual user input from a keyboard or any other text entry device.

HTML kbd tag

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.


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.