Tell Users How to Interact With Your Site Using the <kbd> Element

Semantic HTML Basics

Alex Zito
Semantic HTML
Published in
2 min readSep 2, 2022

--

The <kbd> element represents expected user input into the webpage. For example:

To print your screen, press <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>3</kbd>

Produces the following:

The default style output of this element is a monospace font, though you can add your own custom styles to get something more like this:

--

--

Alex Zito
Semantic HTML

Software Developer + Product Manager. Interested in Travel, Culture, Economics and the Internet. Join Medium: https://tinycode.medium.com/membership