Semantics of the CODE element

HTML & CSS
1

I’m still banging on that HTML/CSS tutorial – started out as a quick “how-to” for a class and is becoming something much larger, maybe even something I can market for use as part of a design curriculum once it’s whipped into shape.

The thing is focused on “modern best practices,” and as such, I figure I’d better use best practices in the code, else I look like a lug. :slight_smile: Here’s the question:

I’m formatting code snippets using the following:

.monospacetext {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Courier New", monospace;
  background-color:#f68e55;
  color: #fff;
  padding: 0 3px;
}

and

[highlight=“HTML 4.01 Strict”]<span class=“monospacetext”><strong> </strong></span>



But wouldn't this be more appropriate?


```css
code {
  font-family: Consolas, "Andale Mono", "Lucida Console", "Courier New", monospace;
  background-color:#f68e55;
  color: #fff;
  padding: 0 3px;
}

and

[highlight=“HTML 4.01 Strict”]

2

according to the official html spec, yes

the CODE tag “designates a fragment of computer code”

so this is ~way~ more semantic than SPAN

3

Yeppers, that’s what I thought. I don’t know why I didn’t go with the code element to begin with.

Let the find/replace festivities begin…

4

Don’t forget three related element tags; kbd, samp, and var. The kbd and samp are for indicating interactive dialogues, but var might be used nested within any of the others. E.g.


<pre>
<samp>koko:/home/gt#</samp> <kbd>apt-get <var>upgrade</var></kbd>
<samp>Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following packages have been kept back:
  cups grub mysql-server
0 upgraded, 0 newly installed, 0 to remove and 3 not upgraded.
koko:/home/gt#</samp> <kbd>exit</kbd>
<samp>exit</samp></pre>
=============
samp, kbd, var, code {
  font-family: monospace;   /*the usual default*/
  }

kbd {
  font-weight: bold;
  }

var {
  color: blue;
  }

cheers,

gary

5

I rarely think about those tags, though they would be of some use in my design. Thanks for the reminder!

6

I agree. For what you’re doing, it sounds like code is the most relevant, and depending on what you’re doing, maybe var (more useful for marking up PHP, C#, Java, etc. However, you can you kbd elements to indicate actual user input that should be submitted to a particular application and samp elements to indicate the application output for that input. Code is the most widely applicable and I use it a lot on my beta website when I explain a new procedure to markup code for the new feature.

7

I agree. Code seems to be the best overall choice for my purposes. Thanks, all!

8

I went with pre back in the day when I investigated this. Don’t remember, but code didnt do something or other that I needed.

9

PRE is a block element, CODE is online

10

Yep. They serve somewhat different functions. For what I’m doing, CODE works quite well. I am, however, using another styled class to present HTML and CSS code in a larger, styled block. I think the question of using PRE in that case will be identical to the question about CODE I asked earlier. I think I’m going to make that change also.

11

Code is a phrase entity, and is inline. It does nothing special other than the usual default to a monospace font family. You are probably remembering it not keeping your formatting. Fortunately, as an inline, it belongs in a block container, and pre fulfills both functions.

cheers,

gary

12

Given that PRE is a block element, is it semantically accurate to surround a PRE tag with a P:

<p><pre> ... content ... </pre></p>

or have it stand alone?

13

It may not be the child of <p>. It may be the child of <body>, <div>, or <li>, for example, or any element that may contain a %block or %flow entity. Like most %block elements, it may stand alone.

cheers,

gary

14

i said CODE was “online” and i am sorry for the typo, i meant inline, didn’t i

15

I should have known that. <p> elements can’t contain block elements. Duh.

No worries, Rudy, slip of the keyboard.

16

The proper method of presenting a code block would be:

<pre><code>function write_message() {
  echo "Code goes here";
}</code></pre>

You could theoretically use a div in stead of the pre and style it using CSS, but the pre does have some semantic significance as well (it indicates that the whitespace entered has significance for the contents).

17

why would you need to use CODE inside a PRE block? what makes that the “proper” way?

18

The pre is structural and says these contents’ structure is important. It says nothing about what the content is. The code tag indicates what that content is. As in my example above, that could just as well be some other inline element that bestows a semantic value on the content.

cheers,

gary

19

Because pre indicates preformatted text, while code indicates a fragment of computer code. They are two completely different aspects of a snippet of code.

Your question is analogous with this one: ‘why would you need to use ABBR inside a P block?’

20

Tommy, since I’ve styled my PRE and CODE elements to appear entirely differently, if I use them together, they will conflict most hideously. Any suggestions? I don’t want to use a class on the standalone PRE formatted text if I don’t have to, but I can if needed.