Semantics of the CODE element

HTML & CSS
21

Just say pre code {…} to override the previuos set of code rules. Although, I would just ommit the code tag when using pre. It does nothing above and beyond adding sematic value (if you care).

22

I tend to agree with you, Eric, but we risk the wrath of Tommy the Mad Semanticist by advocating such heresy. :slight_smile:

23

Doing so gives you two problems, though:

[list][]Your code is not semantic.
[]When you at some point will need pre for some purpose other than a code block (I can think of several), you’ll either need to invent a class for this purpose, or re-code your entire site.[/list]

Using code inside your pre will fix both problems, without any disadvantages. If you’re concerned about your CSS, you can even use pre, pre code { } to override the style for code { }, without exapnding your style sheet significantly.

24

Christian, I’ve thought about your caveats. I sometimes take a “who gives a hoot about semantics, I just want it to work” approach, and every time I get bitten sometime later on. Think I’ll play it safe this time… (The reason why Tommy the Mad Semanticist can be so annoying is that he’s right. :stuck_out_tongue: )

25

Hrm, in the past I’ve had so much trouble getting <code> to work inside <pre> I gave up on it. Even with no whitespace, <pre><code> seems to leave a big gap at the top of the <pre> element. I got sick of trying to work out what was causing it. :frowning:

26

And that is the whole bleedin’ point with HTML in the first place!
If you don’t care about semantics (which means you don’t care about usability or accessibility either, since they depend on semantic correctness) you can just use div elements and IDs and classes to style them with CSS. Or, better yet, stay off the Web! :mad:

There will be a ‘big gap’ if you leave a newline after those two tags, like this,

<pre><code>
some code here
going over several lines
</code></pre>

That’s only to be expected, since the whole purpose of <pre> is to preserve whitespace! So if there shouldn’t be a ‘semantic’ line break at the top of the block you need to write it like this,

<pre><code>some code here
going over several lines</code></pre>

You may also want to set margin-top:0 for <pre> elements, just in case.

27

Were you aware that pre has a default top and bottom margin?

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin: 1em 0;
}

See file:///[path to Firefox]/res/html.css for Firefox’s take on the matter.

cheers,

gary

28

Thanks for that suggestions Tommy and Gary. I did actually remove all newlines and still got the same behavior—even with margin: 0 on the <pre>.

However, I will have another look at this, as I was ignorant of the semantic importance of <code> within <pre>.

29

Huh, don’t get it. I tried it this time (a few years later) and it worked fine. Dunno, maybe I’ve learned something.

Off Topic:

(Hmm, what happened to Eric’s post?)

30

Since I’ve gone back to working 15 hours a day (ugh), I haven’t had a chance to incorporate the <pre><code> goodness into the site. Therefore I haven’t had a chance to see what happens to me with that top/bottom margin, but I’ll know not to leave a newline after the opening code.

Did Eric delete a post? Eric, I sympathize with your drawing the wrath of the Mad Swede :slight_smile: but at least your wife doesn’t have a crush on him. :smiley: Count your blessings.