HTML <kbd> id Attribute

An id on a <kbd> tag assigns an identifier to the element.

The identifier must be unique across the page.



An id attribute on 3 <kbd> elements.

CTRL + C is used to copy content,
CTRL + X is used to cut content, and
CTRL + V is used to paste content.

  <kbd id="ctrl-c">CTRL + C</kbd> is used to copy content,<br />
  <kbd id="ctrl-x">CTRL + X</kbd> is used to cut content, and<br />
  <kbd id="ctrl-v">CTRL + V</kbd> is used to paste content.<br />

Using id

The id attribute assigns an identifier to the <kbd> element.

The id allows JavaScript to easily access the <kbd> element.

It is also used to point to a specific id selector in a style sheet.

Tip:  id is a global attribute that can be applied to any HTML element.


<kbd id="identifier" />



Value Description
identifier A unique alphanumeric string. The id value must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

More Examples

A <kbd> tag with a unique id.
Clicking the button will display the text inside the element.

CTRL + C is used to copy content.

<p><kbd id="mykbd">CTRL + C</kbd> is used to copy content.</p>
<br />
<button onclick="show();">Show content</button>

  let show = () => {
    let kbd = document.getElementById("mykbd");
    alert("Content = " + kbd.innerHTML);

Code explanation

The id attribute assigns a unique identifier for the <kbd> element.

Clicking the button calls JavaScript which locates the <kbd> using the id.

Finally, the content of the <kbd> is displayed in an alert box.

Browser support

Here is when id support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

 Back to <kbd>

Last updated on Sep 30, 2023