Any time you display information on a webpage, the actual content and presentation are tied together; the information is tied to the visual design and the reader must be able to access the information then interpret it. The ultimate goal of the web is to make the content accessible to every user. Web content is neither tied to a specific operating system, software or even a computer—web content can be accessed on a wide variety of devices even some kitchen appliances can read web documents. The content can be displayed in a dizzying array of sizes, colors and fonts, limited only by the reader’s imagination. The goal of achieving device independence as well as access for all therefore must lie in the separation of presentation and content.
For those who are unclear about what exactly constitutes content and presentation, content refers to the information in your web pages as well as how that information is structured. Structure may appear to be somewhere floating between content and presentation however presentation would be meaningless without structure therefore the structural elements belong more clearly to the content side. Presentation encompasses all the ways the content—and the structure of the content—is presented. Anything which controls how the content appears rather than what it actually says is presentation. The separation of content and presentation may seem like a foreign concept since most of us are accustomed to making the visual choices related to content such as headings, paragraphs, lists, etc.
The Benefits of Separation
By separating the content from the presentation on your website you will ensure your web pages are more widely accessible to your potential clients. In practical terms, however, it can be extremely difficult to maintain the distinction between presentation and content since often we are unable to see the difference between what is being communicated and how it is being communicated. When you realize that even the most poorly formatted document nonetheless has a presentation in the form of layout, fonts, etc., you understand the difficulty in the clear separation.
How to Achieve Separation
The first step in the overall idea of separation is to build structure into web documents through the use of HTML which encodes headings, paragraphs and lists. The document which results from this step is richer in meaning and can be accessed by any web-enabled device in the necessary format. Think of your overall intentions when attempting to separate content from presentation—what is your content goal for your web users, and what do you think potential clients intend to do with that content? Do you think it is what they are searching for, what they need to answer their most pressing questions and problems?
To begin separation, start with plain text—that is, text which is placed in a notepad on Windows. Then use HTML tags which clearly mesh with the meaning of the content. Remember, HTML tags should describe the text placed inside rather than be placed simply to achieve a desired “look.” Double-check to ensure you are not accidentally placing presentation markup when new content is created and learn all the styles available to you. Take a look at your finished product—it should be simple, crisp and clear and you should know exactly what each HTML tag is being used for.
In the end, the separation of presentation and content can stop a simple design tweak from becoming a full-fledged re-design. Isolating content ensures adding and updating will be as simple as possible while design consistency is maintained throughout your sight. While the separation of content and presentation can make you want to throw up your hands in despair—don’t. There is plenty of high-quality help available to make the process as simple as possible.
