Filed under:
Web-design

You must have come accross a site where you wanted to insert a block of (X)HTML, CSS or some other code. Perhaps you run a blog and share some coding tips and tricks with the world, like me. What HTML tag(s) do you use to write your blocks of code? PRE, CODE, P, a combination of those, or something else? Are your blocks of code semantically correct?

In the Neighbourhood

I browsed through a few sites from my favorites folder, to see what methods other people use, and here I’ll mention just a couple…

Ordered lists

Roger Johansson from 456 Berea Street, as we can see, uses ordered lists. When indentation needs to be added, Roger simply applies a class with padding to a list item.

Styling a piece of code with CSS and using an ordered list may look pretty, but you have to admit, it really isn’t semantically correct. When you have tags like PRE and CODE, why use a list and create something that really isn’t a list?

Paragraphs

Douglas Bowman from Stop Design simply uses a paragraph and styles it with CSS. If indent needs to be added, he uses non-breaking spaces. Again, you have to wonder about the semantics behind this method.

Jeremy Keith on Adactio also uses paragraphs, followed by the CODE tag. For the indentation, he uses non-breaking spaces.

Is a block of code meant to be within a paragraph of text?

Thinking About the Semantics

Working on a new site made me and my friend Sulien think of the semantics behind it all. When asked about this issue, he was quick to suggest this:

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

Voila! We do need preformatted text, don’t we? And what we’re writing is computer code. Using the PRE tag will take care of the indentation problem, and no no-breaking spaces are needed, or line breaks, for that matter. So, pretty much everything works in our favour.

Your thoughts?