CSS & mark-up tangled together

The topic under discussion

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, a significant part of the mark-up of a document is dictated by the layout 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 layout. This 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.

Which comes first, the content or the mark-up?

Middle English paragraf, from Old French paragrafe, from Medieval Latin paragraphus, from Greek paragraphos, line showing a break in sense or a change of speakers in a dialogue. 

yourDictionary.com

The classic (pre-web) theory of mark-up was (at least ideally) a set of instructions added to existing content such as text to enable other people to present the content according to a combination of the author's intentions and the house-rules. So an author would say "this is another paragraph", and "this is a heading", and the font-size and line spacing of the text would be set accordingly. Indeed the word "paragraph" originally meant "a written mark that indicates a change of sense".

But, on the web, there is now a continuum of types of mark-up, with the following extremes:

  1. Sometimes mark-up is added to content. This is the "classic" approach. The logical structure of the article is specified at this time, such as the levels of headings and their corresponding paragraphs. And more specific styling can be achieved for special purposes. The author can mark-up a species-name (say) in some suitable way, for example <span class="species">Grapsus grapsus</span>, and this will cause the browser to render it in italics, Grapsus grapsus. On the whole, CSS can handle this situation very well indeed. It has been designed for this purpose.
  2. Sometimes content is added to mark-up. This is a very common technique for layout purposes. For a particular page, perhaps a "template" is chosen that was created long before this particular content was conceived. Or useful mark-up techniques for the layout being considered are re-used from elsewhere. The content is then fitted into the sequence and nesting of elements dictated by this mark-up.

When designing a document or series of documents, content developers should strive first to identify the desired structure for their documents before thinking about how the documents will be presented to the user.... To determine if content is structural or presentational, create an outline of your document. Each point in the hierarchy denotes a structural change. Use structural markup to mark these changes and presentational markup to make them more apparent visually and aurally. Notice that horizontal rules will not appear in this outline and therefore are not structural, but presentational. Note. This quicktest addresses chapter, section, and paragraph structure. 

W3C, "Core Techniques for Web Content Accessibility Guidelines 1.0"

These may then be applied in sequence. The "layout mark-up" (type 2) comes first. The article is added to this layout mark-up. Then the article's "logical mark-up" (type 1) is added according to its detailed content. This appears to contradict the "Core Techniques for Web Content Accessibility Guidelines". The reason is that the Guidelines appears to think of a "document" as the unique content or article of the page. Whereas, in practice, the layout of the page has typically been designed before that content was created. The Guidelines are only addressing "logical mark-up", (type 1).

Examples

Both techniques have been used on this page. The "template" mark-up was developed as a general-purpose 2-column layout some time before this article was considered. Then the content was typed into a copy of this template. Then the content was marked-up with headings, paragraphs, lists, emphasis, etc. The result is that some aspects of this page can be changed just by changing the CSS. Other changes would need re-sequencing and re-nesting of elements. And the colour scheme of the page is one of a set of schemes controlled by the CSS, but the particular colour scheme being used is specified in the mark-up, specifically by an attribute of the form: <body id="blue">.

A very good example is Eric Meyer's "Netscape DevEdge Redesign: CSS" (11 Feb 2003). This has about 10 elements with a carefully considered sequence and nesting, designed to provide considerable flexibility while also catering for other issues such as linearisation. While those 10 elements do not specify the layout by themselves, they exist in their form solely to work jointly with the CSS to achieve the desired layout. They would not exist if the page did not need laying out. And they still impose certain constraints on the page layout.

So what?

It's only mark-up. It isn't sin! 

Barry Pearson, 2004

This set of articles was stimulated by many implausible statements seen about the ability of CSS to give separation of content and presentation. There is little doubt that CSS can successfully provide styles for text of all kinds. But it can't provide styling for all content, and it typically doesn't separate all layout from mark-up.

That is simply an observation. Any person may find it interesting or not. But it becomes more important if capability is over-sold. One particular area where it is oversold is when comparing table-layout with tableless-layout. Neither separates content from presentation. Sometimes, the only significant layout change via CSS alone that can be achieved with tableless layouts that can't be achieved using table layout is to swap left and right. And that is visually typically a poor option.

It is better to recognise this inherent limitation in the the presentation capability of the web, and work to minimise the problems. For example, this current page uses one of a small number of layouts developed at the same time. Each layout needs a different sequence and nesting of elements, because the main technique used is "float". (Absolute positioning tends to be more independent of mark-up, but has its own limiting behaviour, especially "stacking"). So converting a document from one layout to another is not trivial. However, all the layouts share a single CSS, and all the major components being positioned have the same "id", so problems have been reduced, although not eliminated. It would probably be possible to do much of the work of changing several pages from one layout to another using a sequence of "find & replace" actions.

Another option is to accept that CSS control of layout tends to be constrained by the mark-up, and deliberately add extra mark-up to maximise the flexibility. This is the approach which, taken to extremes, is used with powerful and artistic effect by the CSS Zen Garden. Comments in the document say: "This xhtml document is marked up to provide the designer with the maximum possible flexibility. There are more classes and extraneous tags than needed, and in a real world situation, it's more likely that it would be much leaner.... These extra divs/spans may be used as catch-alls to add extra imagery".

Forewarned is forearmed. Don't be fooled by exaggerated claims. Perfect separation, of content & presentation, of CSS & mark-up, is unlikely to be achieved in the near future. So, make a realistic assessment of how much change you likely to need in future. It is a given that all things like text styles can be dramatically changed by just changing the CSS. But how much else is needed? Perhaps you need to add just a little extra mark-up, in preparation? For example, I have done so with my photograph pages. (See the photograph linked to from the thumbnail in the sidebar here). The mark-up for the photograph itself is:

<div class="outer"><div class="middle"><div class="inner">
<h1><img src="..." height="..." width="..." alt="..."></h1>
</div></div></div>

At the moment, this set of 3 nested <div>s is used to provide the "hooks" that the CSS needs to add a simple double-line border round the photograph. But it could add a lot more in future. Having 3 of them appears to provide just a useful amount of leeway without going "over the top".

Remember. If you don't separate content from presentation, the sky doesn't fall. Your pages don't suddenly become inaccessible to blind people. You won't damage the web. But the less separation you have, the more work you may end up with if you need to make large changes in the future. Even then, it will probably be far less than if you need to add Gujarati as another language!