What are the differences between kbd, samp and code in HTML

Question

I'm currently reading the HTML tutorial on w3schools (no CSS or JavaScript yet) and I wonder why are there so many different tags that look the same after all?

For example I don't see any (optical) difference between kbd, samp and code except the "meaning" of each tag.

So my question: Is it just the meta information that differs these tags?

Answer 1

Correct. The semantic meaning is different. The default rendering is to use a monospace typeface because that's the most appropriate.

<kbd> represents keyboard input, though StackOverflow renders it like real keys.

<samp> represents sample computer output, and originally computers were monospaced :)

<code> represents programming code input, and the vast majority of programming languages are designed to assume a monospaced editor font - excepting C++'s book which prefers variable-width, for some reason, and some breeds of Python. Note that <code> is an inline element, whereas <pre> is used for block-level markup (i.e. paragraphs) of code.

The fact that default rendering is the same does not mean you cannot assign your own rendering styles like StackOverflow does.

Answer 2

The kbd element represents user Input. Examples for user input are:

Key Input

<p>Please, press <kbd><kbd>Shift</kbd>+<kbd>A</kbd></kbd></p>   

Terminal Command

<p>Please, input "<kbd>Yes</kbd>" or "<kbd>No</kbd>"</p>

Buttons or Menu (GUI-Input)

<kbd>File | Open...</kbd>

File | Open...

---

The samp element represents output from a program or computing system. For example an cmd Output:

How it look like in HTML using samp:

 Directory of D:\mydir

11/15/2007  03:03 PM    <DIR>          .
11/15/2007  03:03 PM    <DIR>          ..
11/15/2007  01:38 PM                 0 10oct2006.txt
11/08/2007  04:28 PM               368 11nov2007.do
11/15/2007  01:39 PM                 0 5june2007.txt
03/11/2007  10:39 AM         1,869,429 beameruserguide.pdf
08/10/2007  01:24 PM            22,016 blog - jsm 2007.doc
04/25/2007  03:07 PM           199,887 clarify.pdf
11/15/2007  01:40 PM                 0 houseplants.txt
04/25/2007  11:42 AM           371,225 Mardia 1970 - multivar skew and kurt.pdf
03/27/2007  01:18 PM           319,864 multiple imputation a primer by schafer.pdf
11/15/2007  02:49 PM                 0 output 1.txt
11/15/2007  02:49 PM                 0 output 2.txt
11/15/2007  02:49 PM                 0 output 3.txt
11/15/2007  02:49 PM                 0 output 4.txt
11/08/2007  03:59 PM             8,514 results.dta
11/15/2007  01:31 PM    <DIR>          sub1
11/15/2007  01:31 PM    <DIR>          sub2
11/14/2007  04:27 PM               952 test.txt
05/21/2007  03:23 PM         1,430,743 zelig.pdf
              18 File(s)      4,225,738 bytes
               4 Dir(s)  249,471,307,776 bytes free

---

The code element represents a fragment of computer code. Examples for computer code are: XML element name, filename, computer program etc.

Code example:

<pre>
  <code>
  function Panel(element, canClose, closeHandler) {
    this.element = element;
    this.canClose = canClose;
    this.closeHandler = function () { if (closeHandler) closeHandler() };
  }
  </code>
</pre>

---

I also want to say that you are right in terms of visual appearance. At most there is no difference between kbd, samp and code. All of them use the same font type. However, it would be better if you use them as described, because the system makes a difference between them.