Can the kbd element be used according to its definition in the HTML5 (CR) spec, or do we have further restrictions for its use on Stack Exchange sites?

The editing help only gives an example, but no definition/help. The linked answer to "What HTML tags are allowed on Stack Exchange sites?" says:

<kbd> - shows keyboard input

But I’m not sure if this is meant to be the definitive definition for its use.

The HTML5 (CR) spec says that kbd represents "user input", not necessarily "keyboard input".

So the following examples should be valid according to HTML5 (CR):

Just press Ctrl+f.

I assume this usage is, without question, appropriate on SE.

Just press Ctrl+f.

If someone uses this structure, it often gets edited by someone else, making it look like the first example.

(Also mentioned in Ban <kbd>, its usage and rendering are incorrect.)

Then click on Post Your Question.

What about this? When I use/saw this, sometimes it gets edited (e.g., removed kbd and added i or quotation marks), sometimes not.

To make it clear: in this example, kbd is not used to make the text look like a button, but because it is a button, i.e., this text is used on a button which the user should "activate" (whether by keyboard or mouse or voice …).

Just for the record, some more (complex) examples of the previous case:

  • You can find it at FileExportExport as XML
  • You can find it at FileExportExport as XML
  • You can find it at File → Export → Export as XML
  • You can find it at File | Export | Export as XML

And also (but here could code be used instead):

  • Enter answers:0 to find all questions with no answers.

While the question Stricter <kbd> usage rules is about a similar topic, it is mostly about usage that is wrong according to HTML5.

  • 3
    I don't care what HTML 5 says. Are you seeing a problem on the site with people using kbd too much or not enough? – Kate Gregory Jan 6 '14 at 16:53
  • 1
    What is your question or thing you want us to discuss? – hichris123 Jan 6 '14 at 16:55
  • @hichris123: "May we use it according to the spec or not?" which results in "Are the edits (that change the markup as mentioned in my question) correct or not?" – unor Jan 6 '14 at 16:57
  • @KateGregory: When I have used it in cases where it’s not about pressing some keys (like documented in my question), it sometimes gets removed (with edit messages like "kbd is for keyboard keys"), sometimes not. – unor Jan 6 '14 at 16:59
  • Is the second one to indicate that the ctrl and f are pressed together? – Richard Tingle Jan 6 '14 at 17:01
  • @RichardTingle: The first and second one are equivalent. It’s defined as: "When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism." If they were to be pressed together (at the same time), one would probably use it (example 1 or 2) without the + character. – unor Jan 6 '14 at 17:06
  • I guess I shouldn't mention that people are using kbd tags to link to outside sites like sql fiddle. – Taryn Jan 6 '14 at 17:07
  • O, in that case I think it is probably to much clutter – Richard Tingle Jan 6 '14 at 17:08
  • @bluefeet: Yeah, this is definitely not appropriate according to HTML5, and it already gets discussed at meta.stackexchange.com/q/181774/193139 – unor Jan 6 '14 at 17:09

In my opinion, good uses of the <kbd> markup include:

  • to mark up a single key such as Ctrl or Enter
  • to mark up a button in the ui being discussed unless we are discussing actually writing that ui. So "click Post Your Answer" is fine in a meta post, but "my Submit button is not working" is not fine in an SO post
  • to mark up a link (rather than a button) subject to the qualifications above, so "click flag to flag a post for moderator attention"

Bad uses include:

  • general emphasis: "be very careful" is as bad as "be very careful"
  • making a link you're providing somehow look cool: jsfiddle here is bad, bad, bad!
  • code labels or elements in a code-focused post, even if those elements are actually buttons
  • making giant castles (I found the link, it was awesome. But wrong. But awesome.)

Also see Stricter <kbd> usage rules

If someone edits away a usage that is meant to represent a user interface element (even if it's not strictly a keyboard key) that's just their opinion. You can roll the change back.

  • 1
    This doesn't really address the issue noted in the question. – user98085 Jan 6 '14 at 22:45
  • 2
    @FEichinger The question specifically asks "can I use it for Post Your Question?" and mentions others editing it away if it's not for a keystroke. This answers that. – Kate Gregory Jan 6 '14 at 22:47

I am fine with this one:

Just press Ctrl+f.

This one is too much clutter:

Just press Ctrl+f.

Who knows, maybe it will soon grow to 3- and more levels, if encouraged.

However, I think kbd should be a documented function and show on toolbar in WYSIWYG editor.

EDIT: In my opinion, kbd should only be used for keyboard/mouse shortcuts, to stay with semantics (let's refer to them collectively as user input devices, someone may otherwise not like joysticks not being mentioned etc.). Menu items can be displayed using code outline or just go AS IS.

To avoid confusion, we can change the style of kbd to something that looks more like a key, rather than a button control:

enter image description here

If really necessary, we could have another tag called <menu>, displaying like this:

enter image description here (Visual Studio 2010).

Or just keep the current kbd style.

  • 7
    At some point in history, someone made a sandbox post to see how many levels of nested kbd could be used. There must have been at least two dozen. I seem to remember it breaking some browsers. Repeating this experiment is strongly discouraged. – Pops Jan 6 '14 at 17:21
  • @Pops: SO could have a checker to eliminate nested <kbd>s - should solve the problem, if anyone dares to do it again. – Neolisk Jan 6 '14 at 17:23
  • Eh. I don't remember anyone ever abusing it in practice other than that one time. – Pops Jan 6 '14 at 17:25
  • 2
    Ànd what about using it for keyboard input vs. user input? In other words: are you fine with using kbd for every kind of input, as long as several kbd elements don’t get nested? Or are you fine with using it for keyboard keys only, as long as several kbd elements don’t get nested? – unor Jan 6 '14 at 19:04
  • @unor: See my edit. My preference is using kbd as keyboard/mouse shortcuts only. – Neolisk Jan 6 '14 at 19:16
  • 4
    @Neolisk: You wrote "to stay with semantics". What do you mean by that? HTML specs defines how an element should be used (and therefore, its "semantics"), and according to HTML5, kbd can be used for, e.g., menu items. So it’s especially not about input devices, but input. Using code for menu items is, in general, not appropriate. – unor Jan 6 '14 at 19:21
  • @unor: Semantics of the word <kbd>, which most likely would be read as keyboard by 99.9% of the users. Originally, keyboard was the only input device, there were no mice in the old days. Hence, the image. Same as 3.5in diskette showing as a Save icon. Younger generation has no idea why Save option is a 3.5in diskette icon BTW. Regarding the abuse of code, I've seen much worse examples than highlighting the menu options. – Neolisk Jan 6 '14 at 19:26
  • kbd used to look like an old clacky keyboard key on Stack Overflow. Jin later made it into the chiclet thingy. – Manishearth Jan 6 '14 at 19:30
  • @Manishearth: Was there any particular reason for this change? Some discussion on meta, maybe? – Neolisk Jan 6 '14 at 19:31
  • 1
    @Neolisk Not that it looked cool, but the older one was ugly. Also, there were some issues where the older one was too fat to fit in its own line and caused overlap. – Manishearth Jan 6 '14 at 19:43
  • 1
    @Neolisk Most laptop keys look like that these days. – Manishearth Jan 6 '14 at 19:48
  • 2
    @Neolisk Neither is shifting to new symbols. The save button is ubiquitous, the trapezoid key, not so much. Besides, I've seen folks abusing kbd markup before the design change, so I don't think that would fix it. – Manishearth Jan 6 '14 at 19:53
  • 1
    @Neolisk That is all completely irrelevant to the discussion at hand, though. None of this has anything to do with the styling of the tag. (In fact, the styling currently does not fully comply with the semantics as per the spec, but that's beside the point, really.) – user98085 Jan 6 '14 at 22:38
  • 1
    "This one is too much clutter" -- are you referring to the rendering? (Then I agree, but then the rendering is wrong, I feel.) – Arjan Jan 7 '14 at 17:51
  • 2
    The use case for the nested element is what this very question is all about... Preferring one over the other just because the formatting on SE is wrong seems a bit odd to me. – Arjan Jan 8 '14 at 17:46

Ultimately, it doesn't really matter. The thing you have to consider here is the appearance of your post. Yes, that element is great for semantically marking up user input, but it also destroys the readability of a post when used excessively or used in an environment where the styles make it an eye-sore.

Generally, when browsing through posts, you want to see keyboard key looking things as little as possible. I tend to stick to the rule of only using them for actual keyboard keys because that's about all of the keyboard styling I can handle. If you're using the markup for, say, 50 different keyboard combinations in a single post, I would say using the markup is a bad thing - that would look atrocious.

Obviously here on Stack Exchange, nested input elements are out of the question because the styles here just plain don't support that usage. It's ugly and would probably just confuse users reading your post. Past that, I prefer just using bold, but it's really up to you.

In summary: meh.

  • 1
    If the styles make semantic markup unreadable, then it's the styles that are at fault and not the markup. – georgebrock Sep 11 '14 at 8:59
  • @george The styles are at fault, and we've been trying ro get them changed. But making a post look odd and comfusing for visitors coming for an answer is still a pretty serious issue that should be avoided. If removing nesting is all we have to work with, then that's what should be done. – animuson Sep 11 '14 at 12:26
  • "The thing you have to consider here is the appearance of your post" -- in which user agent, and with what settings? The separation of content and style is one of the great things about Web technology: let's not trade that for a world where the semantics implied by some Web site's specific CSS are more important than the semantics defined by the specifications, especially on a site where we're teaching people about development. – georgebrock Sep 11 '14 at 12:58
  • @george Those are the same arguments we've all made for changing it, but in this case removing the nesting doesn't change the semantic meaning much at all, and I think the benefit of having the post look normal outweighs a user's desire to semantically group some user input elements together. Personally, I would never know because I have custom CSS that removes all the styling from a kbd around another kbd, so the post won't look different to me either way. – animuson Sep 11 '14 at 13:19
  • Chiming in to say that using kbd:has(kbd) could be used to reset the general style when they are nested so only the inner-most kbds are styled. Unfortunately this hasn't gained browser support, which highlights the issue: there is no trivial way in CSS to style this the "right way" for <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>. – Levi Morrison Apr 25 '18 at 15:49

You must log in to answer this question.

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