HTML kbd Tag - Learn HTML

The HTML <kbd> tag marks user input — text the reader is meant to type, speak, or otherwise feed into a device. The name stands for "keyboard input," but the spec uses it for any user-supplied input, including voice commands and other input methods, not only physical keystrokes.

This page covers what <kbd> means semantically, how to combine it with <samp> to express more specific scenarios, how to wrap key combinations, how to style it to look like a real key, and what it does (and does not) mean for accessibility.

Why use `<kbd>`?

<kbd> is a semantic element: it tells the browser, search engines, and other tools that a span of text represents something the user enters, rather than ordinary prose. It is especially useful in user guides, tutorials, and keyboard-shortcut documentation, where you want shortcuts and commands to stand out.

By default browsers render <kbd> in a monospaced font (every character has the same width). Because that is also the default for the <code> element, the two can look identical out of the box — which is one reason <kbd> is underused. Reach for <kbd> when the text is something the user inputs, and for <code> when it is source code. For a variable or placeholder inside that input, see the <var> element.

Syntax

<kbd> is an inline element written as a pair of tags, with the input text between them:

<p>Press <kbd>Enter</kbd> to submit the form.</p>

The closing </kbd> tag is technically optional in some contexts, but always include it — it keeps the markup unambiguous and easier to read.

Basic example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>To copy the selected text, press <kbd>Ctrl</kbd> and <kbd>C</kbd>.</p>
  </body>
</html>

Try it Yourself »

Marking key combinations

To represent a multi-key shortcut, wrap the whole combination in an outer <kbd> and each individual key in its own nested <kbd>. The outer element represents the combined input as a unit; each inner element represents one key press:

<p>
  Save the document with
  <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
</p>

This nesting is a convention, not a requirement — a single <kbd> per key works too — but it makes the structure of a shortcut explicit and gives you precise hooks for styling each key separately.

Combining `<kbd>` with `<samp>`

You can nest <kbd> and <samp> (sample/system output) to express more specific meanings defined by the HTML spec:

<kbd> inside <samp> — input that is echoed back to the user by the system, such as a command shown in a terminal as the system received it.
<samp> inside <kbd> — input that is based on text the system displays on screen, such as the user clicking a menu item whose label the system rendered.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Input echoed back by the system -->
    <p>The console showed <samp><kbd>npm start</kbd></samp> after I typed it.</p>

    <!-- Input that comes from on-screen text -->
    <p>To open the menu, choose <kbd><samp>File</samp></kbd>.</p>
  </body>
</html>

Styling `<kbd>` to look like a key

<kbd> carries no built-in appearance beyond the monospaced font, so adding CSS makes shortcuts far more readable. A border, a little padding, and a light background make each key resemble a physical keycap. Here the outer combination keeps the default look while each inner key is styled with the .key class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid #b4b4b4;
        background-color: #f7f7f7;
        box-shadow: 0 1px 0 #b4b4b4;
        font-family: monospace;
        font-size: 0.9em;
      }
    </style>
  </head>
  <body>
    <p>
      Create a new document by pressing
      <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
    </p>
  </body>
</html>

Try it Yourself »

Tip

The <kbd> tag is not deprecated. You can achieve richer effects with the CSS font-family and border properties, as shown above.

Accessibility

<kbd> has no special semantics for assistive technologies — screen readers do not announce it as "keyboard input," and it conveys no role or state. It is a presentational and semantic hint for sighted readers and machines, not an accessible label.

So never rely on <kbd> alone to communicate meaning. If a shortcut needs to be understood by everyone, spell it out in the surrounding text (for example, "Press Ctrl plus C to copy") rather than depending on the styled key visuals.

Attributes

The <kbd> tag supports the Global Attributes and the Event Attributes.

<code> — a fragment of computer code.
<samp> — sample or system output.
<var> — a variable or placeholder in code or input.

Practice

Which statements about the HTML kbd tag are correct? Select all that apply.

It marks text that represents user input, such as keyboard keys.It is used for inserting images into a webpage.It is displayed in a monospaced font by default.It is used for italic text formatting.Nesting a kbd inside another kbd can represent one key within a larger combination.It is used to create hyperlinks.

Why use <kbd>?