56

I've found that the <kbd> tag is very useful for marking up stuff other than actual keyboard keys. For example,

  1. Menus: "Navigate to the FileOpen option"
  2. Buttons: "Press the OK button."

Technically, this does match the HTML specs.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

I feel it makes my posts much more clear when used judiciously. Will I be going against any SO guidelines if I use it this way?

12

6 Answers 6

57

Is this acceptable usage on SO?

Sure, why not?

You can mark-up your posts however you want, with some exceptions.

- Excessive or inappropriate emphasis formatting may be destroyed in the course of *normal* peer editing.

Any text that you're quoting verbatim should probably use a >blockquote for the sake of clear and explicit attribution

Nonsensical links may be interpreted as spam - nothing good will come of that.

These tools exist to help you communicate effectively. I wouldn't advocate searching for posts that contain Ctrl + C for the sole purpose of marking them up as Ctrl + C but if you think making a word look like a key or a button is going to make your own contribution come across more clearly, go for it. The worst that's going to happen if the community deems it to be inappropriate is that it'll be edited out and you may receive 1 snark.

5
  • 4
    Oh good grief! That's a bit... excessive. I have better uses for my time than going around changing others' posts to use <kbd>s. :)
    – metacubed
    Sep 8, 2014 at 23:53
  • 4
    @metacubed That wasn't aimed at you specifically; I wouldn't want to inadvertently give the impression that tweaking the markup of every post containing Ctrl would be acceptable. Some people do not have better uses for their time (and assume the same of the rest of us).
    – Air
    Sep 8, 2014 at 23:58
  • 4
    @metacubed The reason you identify in your post is a fine use, unless your post is filled solely with a bunch of buttons that people should be clicking that then makes the post look like an eye sore. As long as you don't start using <kbd> to make links look like buttons, I won't have to hunt you down. ;)
    – animuson StaffMod
    Sep 9, 2014 at 0:09
  • 13
    Must... resist... editing!
    – Cerbrus
    Sep 9, 2014 at 11:23
  • 6
    Today I learned how to make my own dog food. Sep 10, 2014 at 13:41
56

I totally agree

*as long as you do not do what I did.

The only problem I see is, that it could break the flow, at least if used excessively.

9
  • 21
    I'd love to have a flow button on my keyboard ;>
    – user2140173
    Sep 9, 2014 at 9:13
  • it looks like this css should be fixed. Sep 9, 2014 at 16:34
  • 10
    I'd rather have the excessively button. Sep 9, 2014 at 16:40
  • I could also flow excessively, but I only do that judiciously. Sep 9, 2014 at 23:45
  • 8
    I'd rather have the I button...oh wait. Sep 10, 2014 at 6:01
  • I think Windows XP used to do that... once in a while..
    – Marco A.
    Sep 10, 2014 at 6:19
  • 1
    I've thought about replacing my enter keys with either this or Make it so. Enter seems so wrong
    – Emond
    Sep 10, 2014 at 6:27
  • 3
    @ErnodeWeerd Fixed it for ya (btw, what a weerd name). Sep 10, 2014 at 15:07
  • @CamiloMartin - Nice :) yeah, I never use my last name abroad...
    – Emond
    Sep 10, 2014 at 15:59
8

The original use-case for the keyboard tag was this post. It was used as a prototype for the implementation, and as a benchmark platform for performance of the inline CSS and <table> tags that power our comments sections.

Any usage outside of the end goals is usually frowned upon, but now that we have Stack Snippets, the <kbd> tag may be phased out.

(Markdown may also be discontinued when Stack Snippets support MediaWiki rendering.)

On a slightly more relevant note. I don't think you will be banned for your mis-use yet.

Also:

FooBar's BlogAds
nav
 
Ads
Ads
Article
Article
Article

       Footer      Ads

9
  • 6
    Wait wait…what? The original "use case" for the tag was not building castles. That was just a joke, people having fun on Meta. The use case is exactly what it seems like: indicating which keys you should press on your keyboard to initiate a particular action. Like <kbd>Ctrl</kbd>+<kbd>B</kbd> to build the project or what have you. That Meta post was certainly used as an example of how the tag can be misused, and Jeff issued a stern warning against its misuse, lest it be disabled again. And yeah, it was used for both benchmarking and assessing the layout. But not the "use case". Sep 10, 2014 at 3:46
  • 3
    Secondly, how in the world does Stack Snippets replace the use of the <kbd> tag? You aren't going to write a code snippet to show people which keys to press on their keyboard, are you? I certainly hope not. Stack Snippets is not replacing the way that users post answers, it is augmenting it. Just like with any other code sample, you'll still need to have an actual answer. Sep 10, 2014 at 3:47
  • 5
    @CodyGray: I think your irony detector might be broken. [At least, I hope it was irony... ;-)]
    – Heinzi
    Sep 10, 2014 at 6:11
  • @CodyGray Yes, this was irony... is it that hard to spot? Also, if you've ever seen MediaWiki... well... yeah, this was a joke... Sep 10, 2014 at 14:26
  • 1
    @CodyGray On a second thought... If you thought I was being serious, you're severely desensitised to stupidity, lol. I should set up a cron job that prays for you at night. Sep 10, 2014 at 14:28
  • I find your use of Ads offensive. </missing-the-point> Sep 11, 2014 at 1:05
  • @michaelb958 Just a realistic rendition. AdBlock is your friend ;) Sep 11, 2014 at 18:21
  • 1
    Totally missed the irony. I've been hanging out on Meta for a while, there are lots of people with inestimable levels of confusion about how the site works. Sep 11, 2014 at 18:42
  • 1
    crontab -e, 30 2 * * * /bin/pray @CodyGray Sep 11, 2014 at 18:46
3

I think <kbd> is really good when keyboard keys are being mentioned, for example Alt+F4. Otherwise, it seems out of place for me (except for the castles case, of course).

Just my two cents.

2

It's encouraged, as you can see by the fact that there is a nice mechanical-keyboard style associated with it here!

-6

I sometimes highlight links to external IDE sites (e.g. jsFiddle) with the <kbd> tag. To me it feels almost like a "Run" button of sorts:

jsFiddle Demo

I guess Stack Snippets will be the way to go in the future, though.

10
  • 17
    Don't do this. It's inappropriate.
    – animuson StaffMod
    Sep 10, 2014 at 13:43
  • 6
    That's good to hear, I've never been called out on it before. I will break the habit immediately.
    – Cᴏʀʏ
    Sep 10, 2014 at 13:50
  • 10
    It is inappropriate and bad and wrong. Still, now I've seen it, I can't help but like it... :/ Sep 10, 2014 at 15:07
  • 1
    @LightnessRacesinOrbit: I saw it, liked it, and adopted it, but never felt 100% that I should be using it. Now I know!
    – Cᴏʀʏ
    Sep 10, 2014 at 15:25
  • 3
    I agree with @LightnessRacesinOrbit. My first thought was "hey, that's not what it's supposed to... uh, actually looks slick..." Sep 10, 2014 at 19:55
  • 1
    What's the difference between a link and a button?
    – ADTC
    Sep 11, 2014 at 2:03
  • 4
    @ADTC I can't find the "jsFiddle Demo" button anywhere on my keyboard. Sep 11, 2014 at 18:42
  • @ADTC In what context? HTML? Dress shirts?
    – Air
    Sep 11, 2014 at 19:06
  • Cody I think they are called keys, not buttons (it's not a buttonboard). @AirThomas Dress shirts and chains.
    – ADTC
    Sep 12, 2014 at 0:08
  • @Cᴏʀʏ AFAIK there's no rule against this, staff/mods telling you that you shouldn't should be interpreted as their strong opinion, not an act of enforcement.
    – Maybe
    Nov 12, 2023 at 17:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .