DEV Community

Cover image for HTML `<kbd>` Tag

HTML `<kbd>` Tag

Samantha Ming on November 04, 2019

Wrap your keyboard command text with &lt;kbd&gt;. Great to use especially in documentations! It's more semantically correct &amp; allows you to tar...
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

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
 
lucasprag profile image
lucasprag

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
Emmy | Pixi

TIL about <progress>

Collapse
 
samanthaming profile image
Samantha Ming

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

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

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

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
 
gypsydave5 profile image
David Wickes

Nice one Samantha!

Collapse
 
samanthaming profile image
Samantha Ming

Thanks for reading my post 😊

Collapse
 
rohansawant profile image
Rohan Sawant

Awesome! I had no idea this was a thing!

Collapse
 
samanthaming profile image
Samantha Ming

Me too! HTML is filled with goodies 👏

Collapse
 
samanthaming profile image
Samantha Ming

Nice! Perfect use case 😆

Collapse
 
timtrautman profile image
Tim Trautman

Very cool -- I had no idea this existed.

Collapse
 
samanthaming profile image
Samantha Ming

Thanks! Glad you found it helpful 😊