LPrc LPrc - 1 year ago 144
HTML Question

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

except the "meaning" of each tag.

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

Dai Dai
Answer Source

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.