Wrap your keyboard command text with <kbd>

twitter logo Updated on ใƒป1 min read

Wrap your keyboard shortcut key with <kbd>. It is more semantically correct and Phrase tag and used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browserโ€™s default monospace font.

Usage:
<kbd>Ctrl</kbd> + <kbd>C</kbd>

Output:
Ctrl + C

twitter logo DISCUSS (5)
markdown guide
 
 

Hey cool trick! I would suggest adding Ben's example to the article, I was confused as to what wrapping with kbd did until I saw Ben's comment. Great tip though will be using this ๐Ÿ‘

 

Hello, ๐Ÿ˜just edited the post and added the usage method there, Thanks for the comment ๐Ÿ˜Š

 
 
Classic DEV Post from Sep 17

SOLID PRINCIPLES: To start with Object-oriented programming

RaZaan Shrestha profile image
Frontend Dev