13

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?

2
  • 5
    "I wonder why are there so many different tags that look the same [...] I don't see any (optical) difference between kbd, samp and code" - this is one of the most important things to get ones head around when learning markup. The only visual differences you can see are those produced by the browser's default stylesheet. Markup indicates function not form.
    – Rounin
    Jan 5, 2016 at 23:07
  • 1
    100% agreed with Rounin. And, for completeness sake, HTML 4.01 DTD (w3.org/TR/REC-html40/struct/text.html#h-9.2.1) defines a var element that "indicates an instance of a variable or program argument" Mar 4, 2017 at 12:53

3 Answers 3

15

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.

1
  • Which one would you use when describing shell commands in a tutorial. e.g. "To install it type <code>apt-get install foobar</code> into your shell." Is it more a computer output (<samp>) or a code-like command (<code>). Or <kbd>? I imagined kbd more as key-press events and not for full shell commands.
    – buhtz
    Jan 3 at 12:36
6

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>   

enter image description here

Terminal Command

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

enter image description here

Buttons or Menu (GUI-Input)

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

File | Open...

enter image description here


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

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>

enter image description here


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.

2

In HTML you get different buckets of tag soup to build your components. There are the <TABLE> family of tags and related properties and related CSS, the <SECTION> family of tags and properties and CSS (used to build news and blog layouts, for example).

Then there's a group of SVG-related things, the <OBJECT> family for embedded plugins, and so on. Every feature that ever got added has it's own little domain-specific set of terms and definitions. The layout rules differ, you can't use the same CSS with a <TABLE> as you would with a <SECTION>, for instance.

So there is a logical/meta-data difference and a functional/usage difference. Depending on what browser you're using the default browser stylesheet may render some elements visually similar if you just put them on a page, one next to the other without any structure.

The idea is for you to compose these things inside one another, like this:

<section name="blogpost">
    <article class="entry">
        <h1>Page Title</h1>
        <p>Hello world.</p>

with CSS that looks something like:

section p {
    margin-top:1.5em;
    margin-bottom:1.5em;
}
article h1+p {
    margin-top:1em;
}

If you take the above <p> out of <article> context or remove the <h1> before it the CSS that makes it different from a regular <p> will not work. Default browser styles are similar.

Study how these categories of tags are used. Look at some Twitter Bootstrap example code.

All of these tags are for 1) you to use, 2) search engines to understand, 3) you/someone to understand later.

Just learn what the different buckets are, and start using the tags; there aren't actually that many categories of them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.