4

I've just ran into the <kbd> tag for the first time, and it doesn't appear to do anything besides default the text to monospace, which can be done by simply changing the font to monospace using CSS. Does the <kbd> tag have some underlying logic to it that makes it practical, similar to how the <time> tag translates the code to be machine-readable?

I've traditionally seen in-text changes done via a <span> tag, and it appears the <kbd> tag displays the exact same output as a <span> tag with font-family: monospace. What is the point of the <kbd> tag if it simply changes the font? I've searched on SO and other websites for an explanation, but haven't found anything besides the change in font.

span {
  font-family: monospace;
}
<p>Please press <span>Ctrl</span> + <kbd>Shift</kbd>.
Nick
  • 1,392
  • 1
  • 13
  • 20
  • 2
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd – j08691 Apr 01 '19 at 19:57
  • I've read the MDN, and all 3 of their usage cases are simply styling text to have `font-family: monospace` (for the purposes of demonstrating computer input). This doesn't seem very practical to have a tag just for styling 1 CSS property, which is why I'm asking the question. It doesn't seem to be a well-document tag across the internet. – Nick Apr 01 '19 at 20:01
  • All elements have a reason for being other than their visual display (after all, the web was meant to be accessible to people who can't see too). – Heretic Monkey Apr 01 '19 at 20:02
  • 2
    *Stylistically* it makes the text contained within it monospace, but it's value is in its semantics. You could say the same about many other tags. E.g. `

    `. What's the point? All it does it make the text bigger. But like `` the value lies it the semantics.

     – j08691 Apr 01 '19 at 20:02
  • I guess I'm struggling to understand why it needs a separate tag. `h1` tags are very commonly used, which is why I understand having a tag for it even though it's not necessary. `kbd` tags seem to be *extremely* circumstantial. – Nick Apr 01 '19 at 20:05
  • Yeah, well, you know, that's just, like, your opinion, man. – j08691 Apr 01 '19 at 20:07

3 Answers3

5

The kbd tag is more a semantic tag than a tag used for styling. By default UA is using monospace font to style it but its purpose is to

represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). ref

In the MDN page you can also read:

The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • It's interesting that the MDN describes it as a `span`. The usage cases for this seem way too circumstantial for it to have its own tag, but I guess that's just how it works. I would've thought it had deeper logic to it because it can be replicated so easily using 1 CSS property. Thanks for the response! – Nick Apr 01 '19 at 20:17
  • 2
    @Nick the key is that HTML and CSS are two different worlds even if always used together, it's true that we can use CSS to replicate the behavior of comon tags but think for example about screen reader that will simply read the HTML code and semantic tags, they don't care about CSS. Same logic apply to seach engine that are more intrested by your HTML code than your CSS. We tend to think only about the visual so we only use `div` `span` and we style them but the code will lack meaning. – Temani Afif Apr 01 '19 at 20:26
0

It is used to denote user input, often from a keyboard (Useful for tutorials, walkthroughs, etc.) There is no other functionality that it offers.

Although in most user-agent stylesheets it will only change the font to monospace as you have discovered, you can use it to style keyboard or other input the way you want without having to use spans with classes.

g-dg
  • 283
  • 2
  • 11
0

After much research and thought I came up with this answer. The kbd tag is just another one of a number of meaningless bland "blank slate"tags that can be used to hang CSS defined properties on. Another is the span tag.I will also point out that for obvious reasons the kbd tag is a favoUrite when using CSS to style a small rectangular image to look like a keyboard key as a nice alternative to simply typing Shift or Ctrl in plain text (see the several hundred examples on the "wiki" at https://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts or any thread regarding keys on stack overflow example:- https://stackoverflow.com/questions/1550019/how-to-hijack-the-caps-lock-key-for-cut-copy\-paste-keyboard-operations Just my 2 cents worth!! Please keep the change!!

John Fowles
  • 1