Dougal Campbell's geek ramblings

WordPress, web development, and world domination.

Visual Semantics

In response to Mark Pilgrim’sPushing the envelope” post, Hans Nowak complains that sometimes semantically correct HTML elements don’t “look good”. So, he tends to use <pre> instead of <code> to designate code fragments in web pages.

The answer, of course, is to just use CSS to make <code> act more like <pre>. Here’s my CSS:


code {
white-space: pre;
}

And here’s how it renders Hans’ code fragment:


def f(x, y):
if x > y:
print "foo!"
else:
print "bar!"

About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

3 Responses to Visual Semantics

  1. Devon says:

    This is how I’d do it too. I’m told IE doesn’t support CSS’s white-space tho. I wouldn’t know for a fact, since I never need to use IE. Mozilla & Opera work better and handle more coding capabilities . Hmmm….maybe this is a good reason to start slapping “works best in Mozilla” or “Viewed best in Opera” phrases/images on websites. I remember when the web used to be filled with “Best viewed in Netscape” images.

  2. Dougal says:

    I can vouch that it works fine in IE 5.5 and 6.0. I suspect that it IE 5.0 also understands “white-space:pre”, but I don’t know about 4.0.

  3. Lach says:

    What’s wrong with using


    <pre><code>
    var x = z - y++;
    </code></pre>?

    You don’t have to worry about support for white-space: pre; then, and it’ll work in all browsers that can do <pre>

Leave a Reply

%d bloggers like this: