Can we use 'kbd' according to its definition in HTML5?

Question

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 File → Export → Export as XML
• You can find it at File → Export → Export 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.

Answer 1

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.

Answer 2

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:

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

(Visual Studio 2010).

Or just keep the current kbd style.

Answer 3

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.