Marking Up Keyboard Input With HTML kbd

When instructions ask someone to press a key, HTML has an element for it: <kbd>. It marks the text as user input rather than merely making it look monospaced.

<p>Press <kbd>Shift</kbd> to select a range.</p>

Browsers usually display <kbd> in a monospace font, but the HTML standard does not require a particular appearance. You can style it to look more like a key:

kbd {
  padding: 0.1em 0.4em;
  border: 1px solid #aaa;
  border-radius: 0.25em;
  font-family: monospace;
}

Input and output are different

<kbd> also works nicely with <samp>, which represents output from a program:

<p>
  Type <kbd>ls</kbd> and press <kbd>Enter</kbd>.
</p>
<p><samp>file1.txt file2.txt file3.txt</samp></p>

The distinction is small but useful: ls and Enter are things the person enters, while the filenames are what the computer returns. I prefer this semantic markup to a generic <span class="key">; the HTML already says what the text means.