Using the HTML `` Element to Indicate Keyboard Input: Enhancing Webpage Accessibility and Usability

Learn how to use the HTML `` (keyboard) element to clearly mark keyboard input and commands on your web pages. This tutorial explains its functionality, typical rendering (monospace font), and how to customize its appearance using CSS for improved accessibility and user experience.

Using the HTML `` Element to Indicate Keyboard Input

Understanding the `` Element

The HTML `` (keyboard) element is used to indicate that a particular text represents keyboard input. This improves the accessibility and usability of your webpages by clearly identifying keyboard shortcuts or commands. The browser usually renders the text within the `` tag in a monospace font (a font with fixed-width characters), which helps to distinguish it visually from the rest of the text. While the `` tag itself is not deprecated, you can customize the style of your keyboard input using CSS for a more tailored appearance.

Using the `` Element

To indicate keyboard input, simply place the relevant text within the opening and closing `` tags. For example:

<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy.</p>

Styling `` with CSS

You can customize the appearance of the `` element using CSS. For example, you could change the font, color, or add a background color. Here is an example:

kbd {
  background-color: #eee;
  padding: 2px 4px;
  font-family: monospace;
  border-radius: 3px;
}

This adds a light-gray background, padding, and rounded corners to the element, improving its visual appearance.

Browser Support for ``

The `` element enjoys broad support across major modern browsers.

Global and Event Attributes

The `` element supports standard HTML global attributes and event attributes, allowing you to customize its behavior.