Noob: Code & Pre tags...

[Mike]

I'm having issues. I'm attempting to use <code> and <pre> properly, and
I'm confused. I have to assume that <code> is intended to provide
context, as well as a kind of formatting. However the formatting leaves
something to be desired. It doesn't seem to do much beyond using a
monospace font. It doesn't preserve spacing or line breaks. So, I
learned about using <pre> to keep things neat. But it leaves me
wondering why a tag named "code" is kinda code-snippet-unfriendly? What
am I not getting?

Now given that I want to use <pre>, I nest them together. It appears
that when nesting like so:

<pre>
<code>
...stuff..
</code>
</pre>

....the snippet is surounded by additional line breaks, which I have to
assume is because the <pre> is immediately followed by a line break,
and preserves it? Thus the solution is to do it like so:

<pre><code>
....stuff...
</code></pre>

Experiments with different browsers and editors-with-previews seem to
reinforce this. Is this normal practice?

To add insult to injury: I styled <pre> so that snippets would be
surrounded by borders and had different spacing and size. Looks great.
Really simple stuff. Contrariwise, the same changes to <code> resulted
in a disaster. This leads me to believe that <code> is handled in some
complicated way by browsers. Shouldn't it be mainly a font change?

pre{
width:100%;
padding:1em 0;
overflow:auto;
border-top:1px dotted #333;
border-bottom:1px dotted #333;
}

Thanks, and if you have a recommendation for an antidepressant I could use it.
Mike

 

[Toby Inkster]

To add insult to injury: I styled <pre> so that snippets would be
surrounded by borders and had different spacing and size. Looks great.
Really simple stuff. Contrariwise, the same changes to <code> resulted
in a disaster.

That's because CODE is inline and PRE is block.

For big blocks of code, it's a good idea to use:

<pre><code>
...
</code></pre>

as you've discovered. But if you want to include a tiny bit of code
mid-paragraph, just <code>...</code> will do nicely. For example:

http://tobyinkster.co.uk/web-abbr

If you are marking up code in several different languages, you may find it
useful to use classes, e.g.:

<code class="html">&lt;BODY&gt;</code>
<code class="css">margin-left: 1em;</code>
<code class="perl">$_++</code>

More fun:
http://test.tobyinkster.co.uk/Preview/Syntax-Highlighting/test.php

 

[Mike]

That's because CODE is inline and PRE is block.

For big blocks of code, it's a good idea to use:

<pre><code>
...
</code></pre>

as you've discovered. But if you want to include a tiny bit of code
mid-paragraph, just <code>...</code> will do nicely. For example:

http://tobyinkster.co.uk/web-abbr

If you are marking up code in several different languages, you may find it
useful to use classes, e.g.:

<code class="html">&lt;BODY&gt;</code>
<code class="css">margin-left: 1em;</code>
<code class="perl">$_++</code>

More fun:
http://test.tobyinkster.co.uk/Preview/Syntax-Highlighting/test.php

Thanks! Nice site, btw.

 

[Mitja Trampus]

That's because CODE is inline and PRE is block.
For big blocks of code, it's a good idea to use:
<pre><code> ... </code></pre>

One more alternative:
Since PRE has no semantic meaning, I prefer to use

<code class="snippet"> ... </code>

in combination with

code.snippet {
display: block;
white-space: pre;
}

 

[Jukka K. Korpela]

Since PRE has no semantic meaning, I prefer to use

<code class="snippet"> ... </code>

in combination with

code.snippet {
display: block;
white-space: pre;
}

The PRE element has a meaning: it indicates a block of preformatted text.
(And it is a semantic meaning. "Semantic" means "relating to meaning", so
"semantic meaning" is just an emphatic expression for "meaning".)

On the practical side, your approach implies that in any non-CSS rendering
situation, the entire code snippet is rendered as running text, without
preserving whitespace. Besides, there will be problems in CSS-enabled
rendering, too, since support to white-space: pre is not universal.

 

[Andy Dingley]

The PRE element has a meaning: it indicates a block of preformatted text.
(And it is a semantic meaning. "Semantic" means "relating to meaning", so
"semantic meaning" is just an emphatic expression for "meaning".)

If you're taking things that far, <pre> has a semantic meaning, but
<code> has a pragmatic meaning, at a level of abstraction above this.

 

[Toby Inkster]

code.snippet {
display: block;
white-space: pre;
}

This is a bad idea. Think of non-CSS browsers.

(As it happens I do often use "display:block" on <code> elements, but
that's just to get the background colour to spread out nicely -- I still
use <pre>...</pre> for white space control.)