Separation of presentation and content
   HOME

TheInfoList



OR:

Separation of content and presentation (or separation of content and style) is the
separation of concerns In computer science, separation of concerns is a design principle for separating a computer program into distinct sections. Each section addresses a separate '' concern'', a set of information that affects the code of a computer program. A concern ...
design principle as applied to the authoring and
presentation A presentation conveys information from a speaker to an audience. Presentations are typically demonstrations, introduction, lecture, or speech meant to inform, persuade, inspire, motivate, build goodwill, or present a new idea/product. Presenta ...
of content. Under this principle, visual and design aspects (presentation and style) are separated from the core material and structure (content) of a document. 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 Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...
(
HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaS ...
vs.
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
) and document typesetting ( body vs. its preamble).


Use in Web design

This principle is not a rigid guideline, but serves more as
best practice A best practice is a method or technique that has been generally accepted as superior to other known alternatives because it often produces results that are superior to those achieved by other means or because it has become a standard way of doing ...
for keeping appearance and structure separate. In many cases, the
design A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process or the result of that plan or specification in the form of a prototype, product, or process. The verb ''to 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 "Don't repeat yourself" (DRY) is a principle of software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy. The DRY principle is stated as "Every piece of ...
'' (DRY) principle.


Use in document typesetting

LaTeX Latex is an emulsion (stable dispersion) of polymer microparticles in water. Latexes are found in nature, but synthetic latexes are common as well. In nature, latex is found as a milky fluid found in 10% of all flowering plants (angiosperms ...
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.


See also

*
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
*
Form follows function Form follows function is a principle of design associated with late 19th and early 20th century architecture and industrial design in general, which states that the shape of a building or object should primarily relate to its intended function ...
*
HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaS ...
*
LaTeX Latex is an emulsion (stable dispersion) of polymer microparticles in water. Latexes are found in nature, but synthetic latexes are common as well. In nature, latex is found as a milky fluid found in 10% of all flowering plants (angiosperms ...
*'' Lorem ipsum'' * Markdown *
Model–view–controller Model–view–controller (MVC) is a software architectural pattern commonly used for developing user interfaces that divide the related program logic into three interconnected elements. This is done to separate internal representations of info ...
software architectural pattern


References

{{Reflist Design Web design