Separation of presentation and content

Separation of presentation and content (or "separate content from presentation", a special case of the form and content principle) is a common idiom, a design philosophy, and a methodology applied in the context of various publishing technology disciplines, including information retrieval, template processing, web design, web development, word processing, desktop publishing, and model-driven development. It is a specific instance of the more general philosophy, separation of concerns.

Intended meaning

When invoked as an idiom, the underlying concept is to make a distinction between the actual meaning of a document, and how this meaning is presented to its readers. A common example is the <em>...</em> phrase element in HTML, to denote emphasis. While emphasis is part of the content of the document, its presentation may be in an oblique font style, but one need not necessarily imply the other: for example, emphasis in text that is already oblique should in fact be printed in some other font style or weight (e.g., normal again or in boldface) that is distinct from that of the text it appears in; conversely, oblique text need not imply emphasis—it could be used to style a preface, for example. Moreover, notice that the foregoing sentence assumes that the output mode is visual; but if the mode were audio, the indication of the intended meaning (emphasis) could be achieved by formatting the <em>...</em> words with a louder or higher-pitched voice by the text-to-speech synthesizer. Separation of content and presentation means that markup elements are always used for document structure, never for presentation (which is properly the job of tools such as XSLT, XSL, and CSS).

An extreme example of separation of presentation and content—a list presented as a tag cloud.

Machine readability

The general aim of separation of presentation and content is machine readability, that is, making it possible for machines to detect meaning or intent. (The machine readability is then a means to desired ends, as discussed below.) For example, a human being reading a document has little trouble to grab from context that an oblique rendering in one place would be emphasized text, but in another place is a title of a book. However, as robots and crawlers have more difficulty with this task, separation of presentation and content generally aids in their distinguishing of such things which are presented in the same way, but have a different meaning—or have the same meaning, but are presented in a different way.

Machine readability allows affordably serving the information to a wider variety of users (in a presentation that they can understand), where users may be humans or machines. This requires the ability to recast abstractions in new instances quickly and cheaply (that is, without time-consuming reworking), which generally requires automation rather than person-hours of labor. For example:

• The ability to deliver the same information in different media, and to change the medium quickly and cheaply; and within one medium, to change instances easily
  • To serve the same message to different users:
    • as printed display (for technophobes or for users with contextual desire for print)
      • as printed display with the typesetting recast into various graphic designs without time being spent on any manual reworking of the content (a good example is given at CSS Zen Garden)
    • as online visual display (for most users in most instances)
      • as online visual display in various graphic designs
    • as online audio (for blind users or for sighted users with contextual desire for audio)
    • as braille (for blind users)
    • as input to an API (for users that are machines)
      • The other machines can then take the information and do further transformations or actions. These may be ones that people cannot do (or cannot do quickly and cheaply), but machines can do (and can do [more] quickly and [more] cheaply). For example:
        • Take a book and translate it into another natural language
        • Take audio of speech and translate it into another natural language
        • Take audio of speech and transcribe it for reading (for deaf users or for hearing users who want transcription of voicemail into e-mail or IM)
        • Take the data contained in an entire library and search through it for ABC-XYZ, then turn every instance of ABC blue, and serve every instance of XYZ to a machine that will categorize it

Common terms

There are a number of common terms used to describe these two separate dimensions of communication, which include:

Semantic 

logic, information, ontology, semantics, data, outline, model, message, content

Aesthetic (or parsing-related)

graphics, design, layout, style, visualization, view, medium, presentation

Possibility and degrees of separation

In communication design, the message is the content and the medium is the tools to deliver that message. In the book Understanding Media, Marshall McLuhan stated that "The medium is the message", which has since been the subject of much debate. One interpretation is that the choice of medium (presentation tools) affects the (presentation content) message. It is possible for the choice of content and choice of medium to affect the quality of the presentation, meaning how well a message may be received. The degree that content may be separated from presentation depends on how much the quality of the medium affects the quality of the message. In many cases, the possibility and degrees of separation are as subjective as the content itself.

See also

• Internationalization and localization
• Model-view-controller (MVC)
• Separation of concerns
• Style sheet (desktop publishing)
• Style sheet (web development)
• Template (disambiguation)
• Template systems
• What You See Is What You Mean
• Semantic HTML