The separation of presentation from content

From Knowledge Kitchen
Jump to navigation Jump to search


In today's web development environment, and in software development in general, there is a popular principle of separation of presentation and content. In terms of web development, this would mean that the contents of a web page should not be dependent upon the style or design of how that content is displayed on the page.

In some ways, this is a question of efficiency. Until the last few years, a website's style was completely and permanently interwoven with its content. The parts of the code that conveyed the meaning of the site, i.e. its text, were coded in such a way that they also were intermingled with code that indicated how that text should look, what font it should be displayed in, what color, etc. Thus if someone wanted to change the style, they would have to also change the content, and sites were thus difficult to maintain.

In today's web environment, where users can be viewing a website through one of many web-enabled devices, such as screen readers for the hearing impaired, mobile phones, set-top boxes, as well as the regular personal computer, separating the presentation of a website from its content allows developers to use the same content but present it differently depending on the device that is accessing it.

By separating presentation from content, an iPhone user, for example, may see a version of a website that is optimized for a small screen, while a Mac laptop user would see the full-size version. They would both see the same content presented in different ways. You can imagine that a visually-impaired user could also benefit from a different presentation of the same content.

Use HTML for content and CSS for presentation

This is the fundamental principle that we, as trendy web developers, will try to apply to our usage of HTML and CSS code. We will make every effort to use HTML code purely for the content of our web pages. And we will use CSS code to indicate how that content should be presented.

We will also do our best to keep CSS code in separate files from our HTML code, so that the two are not mixed and mingled. Our CSS code will be kept in files with a '.css' extension, while our HTML code will be kept in '.html' files.

All is for the best in the best of all possible worlds

This all sounds great in theory, but the web is a messy place. Given the tools available to us today, the pure separation of presentation from content will not allow us to achieve the sophisticated visual designs we might want our sites to have. We will find that we must often structure our HTML code in such a way that the CSS can easily make the page look the way we want it to, thus making the one somewhat dependent, or at least influenced, by the other.

Furthermore, this separation is predicated upon the notion that a site's design has no importance to its meaning. One could argue that many sites, especially heavily branded sites, rely primarily upon visual impact to impart their message. The idea that a message is conveyed solely or primarily through text with no reliance upon presentation is to ignore the complexity of social interaction, and this principle probably says more about the people who profess such things than it does about technology.

But despite these shortcomings, as things stand today, there are still practical benefits to separating presentation from content as much as possible. Although it is awkward at first, one gets better at it with practice, and it does save time and make maintenance of sites easier in the long run. So you should do your best to separate content from presentation by using HTML to demarcate your content, and CSS to indicate styles for the presentation of that content.


What links here