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.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- Better Line Breaks With CSS balance and pretty
Use text-wrap balance for short headings and text-wrap pretty selectively for longer copy without hard-coded line breaks.
- Why 100vh Doesn’t Always Fit a Mobile Screen
Choose svh, lvh, dvh, or a flexible min-height when mobile browser controls make 100vh an awkward fit.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.