CODEWITHSUNDEEP
htmltagssemantics
SimonH
SimonH

Reputation: 1425

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?

Upvotes: 15

Views: 6849

Answers (3)

Stackcraft_noob
Stackcraft_noob

Reputation: 241

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.

Upvotes: 7

godDLL
godDLL

Reputation: 199

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.

Upvotes: 1

Dai
Dai

Reputation: 155648

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.

Upvotes: 18

Related Questions