HTML Keyboard Input <kbd> Element
- By Christopher Kielty, updated Jan 5, 2019
I am very fond of the Keyboard Input element. It is an inline element, widely supported among browsers, which can be used for demonstrating keyboard input in various ways.
Using single opening and closing
<kbd></kbd> tags around some text will render that text as sample input one might type into an app, maybe a console app or some such thing. I have my stylesheet setup so that it's basically just bold text, although simply making text bold isn't really what this is meant for, it's more about the meaning, why is it bold, or however else it might be styled.
I also like to use double
<kbd><kbd></kbd></kbd> elements to represent keyboard key presses when that's what I'm talking about. For example, when you're saving a file, say, in Inkscape, instead of moving the mouse all the way over to the save button and clicking it, you could just hit enter. See what I did there with the styling? It's the enter key.
See also Complete List of HTML Tags.