Where presentation meets content


Web designers talk a lot about the separation of presentation and content.

In essence, the goal is to set up your HTML — your content — so that it is purely semantic. Your content is composed of words which are arranged in outline format. You use HTML to organize that content into headings, paragraphs, lists, block quotes, tables, and so forth, according to the meaning of the text.

Your presentation, which includes the basic page layout (e.g. sidebar on the left) as well as colors, fonts, and background images, is the icing on the cake. Like actual icing, you put it on at the end, after the HTML is coded. Because the presentation layer is hidden away in a separate style sheet, it doesn’t get in the way of search engines. Access for the visually-impaired is much improved. And your site is very easy to update. If you change your mind about the color of the text in your block quotes, you only have to edit one or two lines of code, and voilà!

In the early days of the internet it wasn’t like this. Presentation and content were all mixed in together. If you wanted a pretty layout you had to make a table and fill it with sliced-up images. If you wanted to change the color of the text in your block quotes, you had to go in and find each block quote and modify the HTML with font tags. This code “bloat” results in web pages that are slow to load, a huge hassle to update, and not search-engine friendly.

Whew! Thank goodness for separation of form and content.

Except that sometimes the two can’t be separated so easily. Sometimes form is content.

For example, not too long ago I did a website that included a restaurant menu. I thought a lot about how to code the information in a semantically-appropriate way, asking myself what would make the most sense if I was hearing it on a screen reader. After much deliberation I finally decided that the menu consisted of tabular data (menu items, descriptions and prices). Others have argued that restaurant menus are ordered lists or definition lists or a series of headings followed by paragraphs. But I think they are truly tabular data.

The format of a table shows the relationships between data. If you’d be equally likely to scan down the columns as across the rows, it’s a table. Generally, when you look at a new restaurant menu, you probably would read row by row, to get an idea of the range of food and prices. But if you’re in the mood for pork, you might start by scanning straight down the left-hand column looking for pork dishes. And if price is your main concern, you’re not going to bother with the left column; you’re going to start on the right. The point is, the physical arrangement of the data — the format — conveys the meaning.

Here’s another example where the physical arrangement conveys meaning: poetry. This is one that puzzles me no end. Are the stanzas of a poem paragraphs? Or is each separate line a paragraph? If one stanza is a paragraph then I will need to use the dreaded <br /> tag (mixing “presentation” into the HTML) to force line breaks. But if each line is its own paragraph then I will need to do something to create the larger gaps between verses — use <div>s, I suppose. Again, mixing presentation into the HTML.