Separation of concerns

The topic under discussion

The concept of using a mark-up language like HTML to supply content, and a style control language like CSS to suggest presentation, is well known. (The concept of a 3rd component like DOM to specify dynamic aspects is also publicised, although it is probably less well known. It is not discussed below).

It is valuable to separate the domains of concern for a large-scale system via well-positioned, clean, interfaces. This isn't for philosophical reasons. It isn't a sin to mix them up! It is for practical - engineering - reasons. It tends to be easier to write the specifications; to acquire focused skills; to build tools and components; to manage the development of large systems; and to maintain them and evolve them later. This applies both for technical systems and for people systems. It applies even more for systems with both technology and people in them. Where interfaces don't naturally exist, it is often necessary to invent them.

The question posed by this article isn't whether to try to separate concerns such as presentation & content. This is likely to be valuable for the above engineering reasons. The questions are where the separation should be, and how do we recognise it. That is not obvious, and the specifications used by web documents are far less than ideal.

 I've read several HTML references, online and off, and all seem to make some mention of the dichotomy of style and content, presentation and structure, appearance and substance. The good designer is admonished to keep them separate in order to ward off various woes: unmanageability, unusability, professional shame. I think this is a myth. I think it has persisted for four different reasons. I don't think web designers need be concerned about it at all....

Separating style from content is like the training wedge in skiing, practiced in the first lessons, abandoned with a little skill. Maybe it's helpful in the introduction. Soothe initial confusion with a simple anchoring idea. Give fretful consciousness something to worry on while the intuitive subconscious practices the real work. I suspect the student is best served by moving promptly beyond. 

Bob Stein, "graphic design basics"

Part I - Style and Content in Mud and War


 Since 1994, HTML has been used a thousand times to control presentation for every one time it's been used to express meaning alone. The issue of separate presentation and content in HTML itself is long closed. It was a noble idea but it's not what happened....

While trying to make visual the intricacies of HTML in a form useful to web designers I finally realized HTML is all presentation. For years I'd preached its intent was to code structure and let automation decide presentation. But the data from a spider program I wrote to tally tag and attribute use in thousands of web sites made it clear that HTML is a presentation markup language. It may have been conceived for structure markup, but it's used almost exclusively to decorate 2D graphical browser presentation. Which is exactly what I'd been doing all along sheepishly. I only realized I was a practicing heretic after discovering the heresy was universal. 

Bob Stein, "graphic design basics"

Part III - The 4 Myth Reasons

What should we try to separate?

The glib answer is "we should separate content and presentation". (Sometimes this is "we should separate structure and style"). That answer begs too many questions to be useful by itself. What is "content"? Indeed, what is "presentation"? Let's start there.

What is "presentation"?

Article styling

I'm sure that everyone can agree that the size, colour, and font-family of a piece of text is "presentation". So are background colours, spacing between paragraphs, whether text is left or right aligned, or justified. The rendering of a horizontal rule is presentation, and so is the specification of a "bullet" in a list of bullet-points (filled-in blob, circle, none).

These are presumably not controversial, and won't be discussed here any more.

Page layout

Is the default "new line" of a <div> or <p> presentation? What about the existence of <hr> (rather than its style)? (Beats me!)

Is the layout of the main 4 or 5 "things" on a page "presentation"? Or is it something more fundamental? Is the position on the page or the screen of the "site navigation" block simply "presentation"? Does it deserve to be at the same level of concern as whether a horizontal rule stretches 70% of the width of a page? I believe not.

The juxtaposition of material is not simply presentation. It isn't simply presentation that a sequence of paragraphs follows a particular heading. Decisions about whether something should be a side-note, a foot-note or and end-note, are not simple presentation. These are vitally important to cognition. I believe that sequence and juxtaposition are helpful with understanding semantics, and they are not just presentation.

Should CSS specify where the browser's menus are? Or where the controls of the operating system (such as the Windows Task Bar) are? All of these things form a sort of hierarchy of concerns. Then so does the "web site skin" such as the banner, the site navigation bar, and the administrative footer. But where is the "web site skin" specified? It isn't. Those brilliant specifiers of the web standards appear to have omitted to specify a language for this!

What is "content"?

The body of an HTML document comprises a "tree" of elements including nested elements. Each element comprises material intended to be of value to the target audience, wrapped up in "mark-up". The valuable material includes such things as text, images, links, forms, and other stuff that is expected to be displayed on a screen or spoken via a speaking-browser. The mark-up uses the tags and attributes of (X)HTML. (That was an informal description! It wasn't intended to be a syntax specification).

So, the body of an HTML document is valuable material, which I'll call "content", plus mark-up. Now, what should we separate from what? Remember that I'm using the word "content" for the substantive material that is (hopefully) of value to the user. Text, images, forms, lists, links, etc.

Content developed with layout in mind

I often observe that much of a page's content can't be separated from the chosen presentation. This especially includes content belonging to the page as a whole, rather than to the specific article or unique content of the page. (I called this "web site skin" above). This page-level content, for example a logo, a search form, or advertising, is often designed and created in accordance with the already-chosen layout. It may have been developed, for example, to fit into the width of a sidebar. That is one of the reasons why it is often not possible to change the whole appearance of a web site just by changing the CSS. This is discussed further in:

Presentation contained within the content itself

In some cases, presentation is contained within the content itself. It isn't something added afterwards. This applies particularly to images of various kinds. It includes borders on photographs, captions embedded in graphs, and the colours and sizes of all of these. In fact, it applies to just about everything except text! An example is shown in:

The impact of layout requirements on the mark-up

Wouldn't it be nice if we could simply put content into the <body> ... </body> of a document in a way that appeared logical to us, then mark it up as we chose so that it could be presented (and laid out) as we chose at any time? And so that it allowed us to change the presentation (and layout) in future simply by changing the CSS?

But this is typically not what happens. Often, the initial part of the mark-up of a document is dictated by the page layout ("web site skin") chosen. This is especially true for certain types of CSS positioning, where the sequence and nesting of the elements has to be chosen to match the desired page layout. This is another reason why it is often not possible to change the whole appearance of a web site just by changing the CSS. This is discussed further in:

So what should we separate?

There is no robust answer. This isn't because of limitations with certain browsers, or because of lack of skill. It is partly because the "architecture" of the web, of web sites & web pages, isn't sufficiently developed to support a clean separation. The specifications are too limited. It is also because aspects of presentation assist with semantics - juxtaposition aids understanding. This is especially true in the following 2 areas, as indicated above:

  1. Some components of content cannot have their presentation controlled in the same way that (say) CSS can control the presentation of text or bullet points. This is especially true of images, but not limited to them. For example, forms may fit only in certain sizes of "box", and a text link that looks OK in an article may be too long to look OK in a sidebar.
  2. We do not have a page-layout language that is separate from mark-up, and separate from the sequencing and nesting of the elements of the document. It doesn't appear that CSS 1 & 2 were designed as a page-layout language. Whether page-layout uses tables or CSS, it is using techniques that were not intended for this purpose. It is not surprising that they don't work very well!

What we must remember is that "separation of content and presentation" isn't an end in itself. The objectives of a web site presumably include communicating with the target audience, within various constraints of development and maintenance costs. The primary judgement must therefore be how well the web site achieves these. Judgement of techniques (etc) can only sensibly be made according to how well they help or hinder the achievement of these objectives and constraints.