Separation of content and presentation

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.

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).

...
Wikipedia