On Marking up Code Blocks

For some reason, I woke up this morning in a “markup astronaut” kind of mood, confused and thinking about how to mark up blocks of code in HTML. This was not a good thing, but to shake it out of my system, here’s some notes.

There seem to be several schools of thought on the subject:


This is the approach taken by the w3c, Eric Meyer, Jeffrey Zeldman and numerous others. There are two problems I have with this method:


This is the approach sometimes taken by Mark Pilgrim, occasionally nested in a <blockquote>. It has the advantage of not breaking a page layout, and avoiding any of the content vs. presentation malarky. But it still has problems:


As seen on Evolt. There’s pages of text on why they do this in “Usability: the site speaks for itself” (unfortunatley published by Glasshaus, who just went bust).

This can only be described as a hack.

<ol class="codeListing"> <li><code>…</code></li> … </ol>

As seen on the css-discuss wiki. This method is just wierd


  1. mu
  2. Cut-and-paste-ability is important.
  3. Of the four options above, the second seems to make most sense to me - but it’d need some work on a stylesheet to make line wraps obvious to a user (which I'm not sure is possible in a nice way).

  4. Thinking about this kind of stuff too hard is not a good thing to do

related notes

March 2003