What case should letters inside <kbd> tags be?


  • ⎈ ctrlr

  • ⎈ CtrlR

  • ⎈ CTRLR

Any there any advantages or disadvantages to different styles? Should we try to maintain a consistent style across the site, in keeping with the wiki nature of SE?

  • 2
    $\begingroup$ I am not sure how important this is in the grand scheme of things (actually I think it really isn't) but I am a detail-oriented freak :). So I think if everybody read this and followed it would be great! $\endgroup$
    – PGmath
    Commented Nov 12, 2014 at 4:10
  • 1
    $\begingroup$ A trivial problem at most, I don't see many people using all caps and having the first letter capitalized is optional, either way, it's optional at most. I can also say that most of the time, these are in the second form that you showed. $\endgroup$
    – iKlsR
    Commented Nov 12, 2014 at 15:13
  • $\begingroup$ @iKlsR Most of the time.. But more than once I have found myself editing posts with lower case single key shortcuts, and I decided to write a meta to make sure I was doing the right thing by capitalizing them. $\endgroup$
    – gandalf3
    Commented Nov 12, 2014 at 19:52

3 Answers 3


I capitalize the one letter keys, and F1 through F12. I specify the NumPad as such:

Press NumPad 1 to switch to front view.

The modifiers, I capitalize just the first letter such as Tab Ctrl Alt Shift. However I find that a lowercase space looks better.

  • 2
    $\begingroup$ This how I personally do it, and it seems to be consistent with other sources as well. $\endgroup$
    – J Sargent
    Commented Nov 22, 2014 at 19:35

I vote for ⎈ CtrlR. This is the way it appears on the keyboard (at least on my keyboard), and as the formatting seems to be designed to represent a physical key, it might as well have the same case as a key.

I don't see any reason to use lower case instead of upper case. The only case I can think of is to differentiate between shortcuts using ⇧ Shift and those not using ⇧ Shift. However, I think just using <kbd>&#8679; Shift</kbd> is a lot clearer, see the following example:

  • Using case to indicate the usage of ⇧ Shift:

    Press g, then G

  • Using ⇧ Shift to indicate the usage of ⇧ Shift:

    Press G, then ⇧ ShiftG

As far as maintaining this consistently across site, I think it would be nice if posts were styled consistently, but I'm not sure how realistic of a goal that is.

  • $\begingroup$ On many windows keyboards it is actually not displayed that way. The windows key defaults to the windows start menu, and the Control key just has Ctrl on it. $\endgroup$
    – J Sargent
    Commented Nov 22, 2014 at 19:42
  • $\begingroup$ @NoviceInDisguiseGraphics I'm not sure what you mean by "windows keyboard", but granted, this probably does vary widely between different keyboards. For instance, my keyboard does have a ⎈ on the Ctrl key. And as the other modifier keys commonly seem to have their own "icon", I figured it would be consistent to include it with Ctrl too. I'm not sure I see the relevance of your second point though. Who said anything about the windows/OS logo key? $\endgroup$
    – gandalf3
    Commented Nov 23, 2014 at 2:30
  • $\begingroup$ Sorry about that, the graphic on the Ctrl key is a simplified windows symbol. $\endgroup$
    – J Sargent
    Commented Nov 23, 2014 at 2:36
  • $\begingroup$ @NoviceInDisguiseGraphics Hm.. Not for me, that might be another problem. It should be this, which is done in the above post with the Unicode character &#9096;. $\endgroup$
    – gandalf3
    Commented Nov 23, 2014 at 2:38
  • $\begingroup$ Very interesting! I looked up control key on the web ( google.com/… ), I can not find one with the graphic. Is your keyboard moderately new? EDIT: Just found one ( xahlee.info/kbd/i2/… ). Since it seems to be so obscure, do you think it is necessary? $\endgroup$
    – J Sargent
    Commented Nov 23, 2014 at 2:42
  • $\begingroup$ I agree 100% with the layout you suggested for the Shift key, BTW. $\endgroup$
    – J Sargent
    Commented Nov 23, 2014 at 2:46
  • $\begingroup$ @NoviceInDisguiseGraphics Huh, that's interesting indeed! It's not really very new, no. Just your average somewhat-old-but-not-really-ancient microsoft keyboard. Here's a picture of a similar one (doesn't look like mine, but the Ctrl key is the same) $\endgroup$
    – gandalf3
    Commented Nov 23, 2014 at 2:46
  • $\begingroup$ I am having a very hard time finding examples using the graphic. It seems to have been discontinued. Let me do some research . . . $\endgroup$
    – J Sargent
    Commented Nov 23, 2014 at 2:48
  • $\begingroup$ It almost looks like the symbol is a replacement for the plain-text version: "Also, there is a standardized keyboard symbol (to be used when Latin lettering is not preferred) . . ." See: en.wikipedia.org/wiki/Control_key Notice that all of their abbreviations are Ctrl + _ $\endgroup$
    – J Sargent
    Commented Nov 23, 2014 at 2:50

To create an appearance of consistency, someone could add a little css rule for <kbd>.

kbd {
    text-transform: capitalize;

With text-transform: capitalize, regardless of the actual capitalization, the first letter of each word would always display capitalized. Therefore either ctrlr or CtrlR would always appear as CtrlR. Unfortunately capitalize would not produce complete uniformity since only the first letter of each word is transformed. Completely capitalize words, such as CTRLR would remain entirely capitalize.


You must log in to answer this question.

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