ArticleslgStudy

science

Separation of content and presentation

Separation of content and presentation is a science topic covered in the lgStudy science library. This page brings together a partial reference excerpt, illustrations, worked examples, real-world applications and a short study plan, so you can understand Separation of content and presentation rather than just read about it. In short: 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.

Separation of content and presentation — main illustration
Separation of content and presentation — illustration

Key takeaways

  • Separation of content and presentation belongs to science; place it in that map before memorising details.
  • Learn the definition first, then one example that makes the definition concrete.
  • Connect Separation of content and presentation to a quantity you can measure, compute or draw — that is where exam questions come from.
  • Reproduce the core statement of Separation of content and presentation from memory before moving on to harder problems.

Reference excerpt

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. 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) and document typesetting (LaTeX body vs. its preamble).

Use in Web design 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 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 an 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 Form follows function LaTeX Markdown Model–view–controller software architectural pattern N-tier architecture WYSIWYG

References

Illustrations

Separation of content and presentation: An example of CSS code, which makes up the visual and styling components of a web page
An example of CSS code, which makes up the visual and styling components of a web page

Worked examples

Example 1 — a first encounter with Separation of content and presentation

Start with the simplest possible case. Write down what Separation of content and presentation claims or describes in one sentence, then invent the smallest concrete situation in which that sentence is true. In science, the smallest case is usually a single object, a single equation or a single measurement. Check that every symbol or term in your sentence has a meaning in that case.

Example 2 — changing one variable

Take the situation from Example 1 and change exactly one quantity: double it, halve it, or set it to zero. Predict what should happen to Separation of content and presentation before you calculate. Comparing your prediction with the result is the fastest way to find out whether you understand the idea or only the words.

Example 3 — an exam-style question

Typical questions about Separation of content and presentation ask you to (a) state it precisely, (b) apply it to given data, and (c) explain a limitation. Practise writing all three answers in under five minutes; the third part is what separates a full-mark answer from an average one.

Applications of Separation of content and presentation

In research
Separation of content and presentation appears in science research whenever the underlying quantities have to be modelled precisely. Papers usually cite it as a starting assumption and then explore where it breaks down.
In technology and industry
Engineering practice reuses Separation of content and presentation in design rules, simulations and safety margins. Knowing the idea lets you read a specification sheet and understand why the numbers look the way they do.
In the classroom
Separation of content and presentation is common in secondary-school and first-year university syllabi. It links to neighbouring topics Design, Web design, so understanding it makes those chapters shorter.
In everyday life
Look for Separation of content and presentation outside the textbook — in sport, cooking, traffic, electronics or the sky above you. An example you found yourself is remembered far longer than one you were given.

Affiliate

Preply — study more efficiently by working with a personal tutor. 50% off.

How to study Separation of content and presentation in 20 minutes

  1. Read the reference excerpt below once, without taking notes.
  2. Close the page and write down what Separation of content and presentation means in your own words.
  3. Compare your version with the excerpt and mark what you missed.
  4. Work through the three examples above with pen and paper.
  5. Explain Separation of content and presentation out loud to somebody else — or to Teacher Smith in the lgStudy chat.

Frequently asked questions

What is Separation of content and presentation in simple terms?

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 struc…

Why does Separation of content and presentation matter?

Because it connects several science ideas at once: it gives you a definition you can apply, a quantity you can calculate, and a way to check whether a result is plausible.

How should I study Separation of content and presentation?

Read the excerpt, restate it from memory, then work through the examples and applications listed on this page. The five-step study plan above takes about twenty minutes.

What does this page cover?

It gives you a compact reference excerpt plus original lgStudy explanations, examples, applications and study material on Separation of content and presentation.

Tags

  • Design
  • Web design

Keep exploring