Noob: Code & Pre tags...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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:


...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:


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?

    padding:1em 0;
    border-top:1px dotted #333;
    border-bottom:1px dotted #333;

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

Re: Noob: Code & Pre tags...

Mike wrote:

Quoted text here. Click to load it

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

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


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:

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:

Toby A Inkster BSc (Hons) ARCS
Contact Me  ~

Re: Noob: Code & Pre tags...

On 2006-07-03 18:15:05 -0400, Toby Inkster

Quoted text here. Click to load it

Thanks! Nice site, btw.

Re: Noob: Code & Pre tags...

Toby Inkster wrote:
Quoted text here. Click to load it

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;

Re: Noob: Code & Pre tags...

Quoted text here. Click to load it

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.

Jukka K. Korpela ("Yucca")

Re: Noob: Code & Pre tags...

Jukka K. Korpela wrote:

Quoted text here. Click to load it

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.

Re: Noob: Code & Pre tags...

Mitja Trampus wrote:

Quoted text here. Click to load it

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.)

Toby A Inkster BSc (Hons) ARCS
Contact Me  ~

Site Timeline