Separation of content and presentation

From Wikipedia, the free encyclopedia
An example of CSS code, which makes up the visual and styling components of a web page

Separation of content and presentation (or separation of content and style) is the separation of concerns design principle as applied to the authoring and presentation of content. Under this principle, visual and design aspects (presentation and style) are separated from the core material and structure (content) of a document.[1][2] A typical analogy used to explain this principle is the distinction between the human skeleton (as the structural component) and human flesh (as the visual component) which makes up the body's appearance. Common applications of this principle are seen in Web design (HTML vs. CSS)[3][4] and document typesetting (Lambert's document[clarify] body vs. its preamble).

Use in Web design[edit]

This principle is not a rigid guideline, but serves more as best practice for keeping appearance and structure separate. In many cases, the design and development aspects of a project are performed by different people, so keeping both aspects separated ensures both initial production accountability and later maintenance simplification, as in the don't repeat yourself (DRY) principle.

Use in document typesetting[edit]

LaTeX is a document markup language that focuses primarily on the content and structure of a document. When a document is prepared using the LaTeX system, the source code of the document can be divided into two parts: the document body and the preamble (and the style sheets). The document body can be likened to the body of a HTML document, where one specifies the content and the structure of the document, whereas the preamble (and the style sheets) can be likened to the CSS portion of a HTML document, where the formatting, document specifications and other visual attributes are specified.

Under this methodology, academic writings and publications can be structured, styled and typeset with minimal effort by its creators. In fact, it also prevents the end-users — who are usually not trained as designers themselves — from alternating between tweaking the formatting and working on the document itself. Similar to the case with HTML and CSS, the separation between content and style also allows a document to be quickly reformatted for different purposes, or a style to be re-purposed across multiple documents as well.[5]

See also[edit]


  1. ^ "Separation: The Web Designer's Dilemma". A List Apart. 14 May 2004. Retrieved 24 May 2017.
  2. ^ Ferrel, P. J.; Meyer, R. F.; Millet, S. J.; Shewchuk, J. P.; Smith, W. W. (March 6, 2001), Method for delivering separate design and content in a multimedia publishing system, USPTO, U.S. Patent 6,199,082.
  3. ^ "Separating Content and Appearance". Simon Fraser University. Retrieved 24 May 2017.
  4. ^ Clark, Dave (2007). "Content Management and the Separation of Presentation and Content". Technical Communication Quarterly. 17 (1): 35–60. doi:10.1080/10572250701588624. ISSN 1057-2252. S2CID 62706215.
  5. ^ "Separation of Presentation and Content". LispCast. 2014-04-18. Retrieved 2019-07-18.