DEV Community

loading...
Cover image for HTML `<kbd>` Tag</kbd>

HTML `<kbd>` Tag</kbd>

samanthaming profile image Samantha Ming Originally published at samanthaming.com ・3 min read

Wrap your keyboard command text with <kbd>. Great to use especially in documentations! It's more semantically correct & allows you to target it to apply some nice styling. You can also use this tag for other user input such as voice input or text entry device πŸ™Œ

HTML

<kbd>Ctrl</kbd>

Text output using kdb tag

Styling

CSS

kbd {
  border: 1px solid lime;
  border-radius: 5px;
  padding: 5px;
}

Output

ctrl

Default Styling

Here's how it looks like without any styling:

<kbd>Ctrl</kbd>

<p>Ctrl</p>

Output

Text output using kdb tag versus Text output using p tag

As you can tell, it looks quite plain πŸ˜…. It simply just has the monspace font. If you open it up in your dev tools, this is what you will get:

/* Default Style */
kbd {
  font-family: monospace;
}

Auto Styling in GitHub & Dev Markdown

But something interesting I discovered. If you use the standard <kbd> in GitHub's or Dev.to's markdown. It looks very similar to the style I have in my code tidbit. This is great to add some pizzaz to your README files πŸ’ƒ Another reason to use the correct HTML tags πŸ˜†

Use Case

This is super useful when writing documentations. I remember I use to always just used the <code> tag and then apply some sort of class to target it for styling. But after doing some googling, I found this a more semantic solution, <kbd>. That's why Google is a programmer's best friend πŸ˜‚

❌ Bad

To copy text, you can use the keyboard shortcut:

<code>Ctrl</code> + <code>c</code>

βœ… Good

To copy text, you can use the keyboard shortcut:

<kbd>Ctrl</kbd> + <kbd>c</kbd>

code vs kbd

So I mentioned that I use to use the <code> tag. Let's look at what that does.

Text output using kdb tag vs Text output using code tag

From your browser, it might not make any difference with the default styling. They both are using the monospace font-family. But semantically they are identified differently.

<kbd>: Text that indicates user input from a keyboard, voice input, or any other text entry device.

<code>: Text that indicates a short fragment of a computer code.

Community Input

πŸ’¬ What other HTML5 tags should I cover next? πŸ˜€

fieldset

@percy_burton: Learnt more about fieldset recently. Thought it was just for radio buttons or checkboxes, but can be to group any related form items, I believe. Great for Accessibility too πŸ˜€

@JelteHomminga: And useful to set the whole set of fields to disabled instead of doing that for each input separately

Resources

β€”

Thanks for reading ❀
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com

Discussion (18)

Collapse
lucasprag profile image
Lucas Arantes

Wow, working with html for awhile, still so many tags I don't know about, that's super cool, thanks for sharing =)

I found out about <progress> a few months ago as well 🀯, so maybe this one would be really nice to share.

Collapse
thecodepixi profile image
Emily A. Pixi

TIL about <progress>

Collapse
samanthaming profile image
Samantha Ming Author

i can’t believe I forgot about that! I’ve used it before too. Alright let me add that to the list, thanks! πŸ‘

Collapse
ben profile image
Ben Halpern

I wasn't aware of the kbd tag until this PR...

Added <kbd> tag support to markdown editors in article posts and comm… #1761

…ents.

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Documentation Update

Description

Added tag support to markdown editors in article posts and comments.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

kbd-tag-support-for-markdown-editors

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

<kbd> tag goodness

I'm glad we support it with DEV markdown as it is super nice for communicating key strokes, as you've described. You need to use the HTML tags of <kbd>ctrl</kbd>. It's odd to me that nobody standardized a markdown-first way to do this.

Collapse
samanthaming profile image
Samantha Ming Author

I was pleasantly surprise to discover this! So I had to update my code notes with images instead to show the default output. You totally spoil and make our blog post super nice right out of the box. Thank youuu πŸ‘πŸ‘

Collapse
fernandomaia profile image
Fernando Maia

Very well explained. You not only brought the information on why one should use kbd, but also brought some great examples on how to use it and a comparison with the code tag.

Collapse
samanthaming profile image
Samantha Ming Author

Thanks for the encouraging feedback! So happy you found it helpful 😊

Collapse
thewebtech profile image
Jon McLaren

Should actually be

Ctrl + c

Collapse
samanthaming profile image
Samantha Ming Author

Nice! The double embed πŸ‘

Collapse
thewebtech profile image
Jon McLaren

Didn't realize it would output the code.

I meant Kbd is supposed to be wrapped in another kbd if used for key combos.

Collapse
rohansawant profile image
Rohan Sawant

Awesome! I had no idea this was a thing!

Collapse
samanthaming profile image
Samantha Ming Author

Me too! HTML is filled with goodies πŸ‘

Collapse
gypsydave5 profile image
David Wickes

Nice one Samantha!

Collapse
samanthaming profile image
Samantha Ming Author

Thanks for reading my post 😊

Collapse
waqarhusain profile image
Waqar Hussain

thank you πŸ’œ

Collapse
samanthaming profile image
Samantha Ming Author

Nice! Perfect use case πŸ˜†

Collapse
timtrautman profile image
Tim Trautman

Very cool -- I had no idea this existed.

Collapse
samanthaming profile image
Samantha Ming Author

Thanks! Glad you found it helpful 😊

Forem Open with the Forem app