Search code examples
htmltagssemantics

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


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?


Solution

  • 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.