The <kbd> element doesn’t get enough love.

When you want to show keyboard commands or user input on your webpage, <kbd> is the element you want to use.

A lot of dev’s will use <code> instead, which should be used for inline code (and, of course, is a lot faster when writing markdown).

Similar to <code>, browsers style it with a monospace font by default.

As am example, if you’re writing docs for keyboard shortcuts:

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

And you can nest them as well:

<kbd><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></kbd>

That type of nesting is optional, and would take a bit of a different styling strategy.

Dive deeper

And, speaking of styling it, Dylan Smith has a nice blog post where he shares a heavily commented example that is also easy to customize thanks to a heavy use of custom properties.