HTML <kbd> id Attribute

The id attribute on a <kbd> tag assigns an identifier to the keyboard input element. The identifier must be unique across the page.

Example

#

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.

<p>
  <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 />
</p>

Using id

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

The identifier must be unique across the page.

The id allows programmatic access to the <kbd> element.

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


Syntax

<kbd id="identifier" />

Values

#

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>

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

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:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <kbd>
Guides