Code is poetry: Researching HTML Code and Pre Tags at the W3

We are working on some major upgrades to our Foliopress WYSIWYG this month. Our wonderful client Richard Nikoley kicks the pants out of his Macbook Pro and he does the same thing to Foliopress WYSIWYG. He’s given us a laundry list of small issues to fix, most of which have to do with minor misbehaviour in the Safari browser.

Given that Safari is webkit and Google Chrome is based on Safari, getting webkit browsers right is a priority for us.

We’ve fixed the text issues (no need to click the source button and back for proper display) but still have to do our SEO Images upgrade to take us from KFM 1.2.1 to 1.4.3 which will give us full Safari support for image upload and insertion.

While we were at it, Martin and I had a discussion about whether to be using code or pre tags for code extracts.

I advocated both, wrapping slapping an unescaped code tag inside the pre tags. It turns out that wreaks havoc in Foliopress WYSIWYG, stripping the line breaks. So our recommendation for Foliopress WYSIWYG users is just use escaped code inside pre tags.

While I was tracking this down though, I decided to chase down the W3 recommendations for the use of code and pre in the HTML 4.01 specification.

Imagine my surprise to find out that poetry is their code example:

The following example shows a preformatted verse from Shelly’s poem To a Skylark:

<PRE>
       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>

Here is how this is typically rendered:

Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest

I hadn’t read Shelley for years, since I wrote a couple of long papers on wife Mary’s Frankenstein. It was a joy to find something so exquisite and uplifting in an otherwise long and dry technical document.

Unknown anonymous specification writer, thank you for bringing this fragment of poetry into this coder’s day.

Code is poetry and as the deconstructionists would say poetry is code.

But what does the W3 specification reveal about the code and pre mystery?

It turns out that code is a phrase element and pre is a visual presentation element.

In the end, code is a bit of redundant information unless you are searching a document for code fragments (which honestly could be just as easily done and more certainly with some nice rules looking for certain patterns). Your search could just as easily use pre to bring up most of the fragments for which you are looking.

Visually both code and pre by default render in a fixed-width font, with code tending to get a typewriter style typeface like courrier and pre tending to get a sansserif fixed width font like Monaco. I think I prefer seeing my code in courrier but there is nothing preventing me from adding a typeface for pre to my stylesheet.

For the sake of simplicity, our recommendation is to just use pre for your larger code blocks. We won’t be doing further debugging of the double nested pre and code tags as just getting pre not to add unnecessary angled brackets was a formidable task. One of the downsides of WYSIWYG editors is limited capability in handling code samples in text.

Unlike basic written text, in code formatting even a single changed space can render the code useless or even destructive.

When writing a major article about programming, we’d recommend turning WYSIWYG off completely which is also a per post option with Foliopress WYSIWYG. There’s nothing more depressing than seeing a carefully built article filled with elaborate code examples crumple and scatter into visual dust. Code samples are tough to rebuild.

For basic use on html or CSS code samples though, pre alone with escaped brackets will take you or us as far as we need to go.

Is there a use for the code tag then?

We do recommend using the code tag for single code elements as in this article.

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.