til / The semantic keyboard input element

I’ve included keyboard shortcuts in a bunch of previous posts and I’ve always surrounded these with the <code> element. Today I learned¹ that there’s a semantic element for this. Enter <kbd>.

Use <kbd>Ctrl + b</kbd> + <kbd>.</kbd> to rename windows in tmux

The default is to render these using a monospace font (just like <code>) and they can also be styled using CSS. The example above together with Tailwind’s typography plugin looks like:

Use Ctrl + b + . to rename windows in tmux

It’s been around forever, so browser support is excellent²