Using the HTML <kbd></kbd> tag to show keyboard shortcuts in your webpages
ID: 321
Category: HTML
Added: 2nd of October 2022
Views: 1,215
If you need to show keyboard shortcuts in your own webpages you can use the HTML <kbd></kbd> tag to highlight various parts of the text.
Examples:
Show hidden files on Linux, press CTRL + h
Paste text on Linux, press CTRL + v
You will want to add your own styling via CSS, as it's hard quite hard to distinguish the highlighted parts of the text without it.
Create a new file on your Desktop named kdb.html, copy and paste the code below then save the file. Launch the file in your browser.
<style>
kbd
{
background:lightgrey;
border:1px solid black;
border-radius:5px;
padding:4px;
}
</style>
<p>Show hidden files on Linux, press <kbd>CTRL</kbd> + <kbd>h</kbd></p>
<p>Paste text on Linux, press <kbd>CTRL</kbd> + <kbd>v</kbd></p>
kbd
{
background:lightgrey;
border:1px solid black;
border-radius:5px;
padding:4px;
}
</style>
<p>Show hidden files on Linux, press <kbd>CTRL</kbd> + <kbd>h</kbd></p>
<p>Paste text on Linux, press <kbd>CTRL</kbd> + <kbd>v</kbd></p>
