Keyboard Tags

Modern HTML provides us with a <kbd> tag that would allow you to describe keyboard shortcuts. These have great support in Github markdown documents but they can also be found in general HTML documents.

That said, you may want to write custom CSS rules to render them properly on your documents.

Custom CSS

Here's a CSS rule that might work in general.

kbd {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: #F3F4F6;
    color: #1F2937;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: #E5E7EB;
}

With this CSS defined, you should be able to render <kbd> elements.

<kbd>Ctrl</kbd> + <kbd>C</kbd> / <kbd>Ctrl</kbd> + <kbd>V</kbd>

This renders as below:

Ctrl + C / Ctrl + V

Tailwind

If you're using TailwindCSS then you could choose to use normal <span> elements instead of using <kbd> directly to achieve the same effect.

<span class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg">Ctrl</kbd> +
<span class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg">C</kbd>

This generates the following:

Ctrl + C

You can also go a step further to generate a proper keyboard with Tailwind if you like (check the devtools to see how this was generated).

Extra Characters

When describing keyboard shortcuts you might type the characters of the key in full.

ctrl + shift + del

But for extra credit, you may want to include the unicode characters for the keyboard symbols as well.

⌘ cmd + ⌥ option + ⇧ shift + ⌃ control ⏎ enter