Separating Content From Presentation

Learning to separate your content from its presentation is probably the quickest and easiest way to ensure you are creating the most Accessible, Usable, Web Standards Compliant, Cross Browser and Platform Compatible web pages possible. The best news of all is that it is very easy to learn to do.

How you present your content determines how it is consumed. You are providing your content primarily through web pages in XHTML format, and it is most often going to be consumed by a web browser. There are different types of web browsers and each of these browsers interpret HTML and CSS a little differently. Microsoft Internet Explorer is the most common but many people use Mozilla Firefox. Some Mac users prefer the browser Safari, and a growing number of people use PDAs and cell phones to view web pages. Of course, there are also users with disabilities who need to consume your content in special browsers that can read it to them. Your content will also be consumed by machines like search engines and it will definitely be printed for offline use. You can begin to see with all these different ways our content will be consumed, one way of presenting it will not work for all.

You can never be sure how the consumer of your content will be using it so it is important that the content is able to be used with any experience. So we separate our content from its presentation and let the users have control over how they take it in.

What is Content?

Content is substantive information which is generally presented in a container or expressed through a medium. To be valuable, it must have some significance to its consumer and be effectively presented.

Content is nearly always wrapped in some kind of media. The nature of the media often dictates how content can be consumed. This fact can potentially cause problems. While the idea of separating content from its container or the medium through which it is expressed is somewhat abstract, making this separation can be very simple and powerful.

Common Types of Content Found on the Web

  • News
  • Instructions
  • Stories
  • Maps
  • Images
  • Audio
  • Video
  • Forms
  • Spreadsheets
  • Powerpoint Presentations
  • Documents
  • Lists
  • Steps
  • Tables
  • Information

What is Presentation?

Presentation is the package. It is the size and color of the text and images, the volume and speed of the audio and the organization and layout of the page. Presentation determines where there is white space and where there are lines. It determines how a word or phrase is emphasized but not the fact that it should be. The presentation should not fundamentally alter the meaning of the content.

All word processing tools have features that allow a user to alter the size, position, color, type face, alignment and potentially many other presentation aspects of the text. All of these layout features have nothing to do with the actual content (the text). The same is true for HTML editors (ie. Dreamweaver and FrontPage, Coffee Cup…). When these tools output the content to HTML, they embed presentation mark up, or code which tells the browser (ie. Internet Explorer, Firefox, Safari) how the author wishes the text or other elements of the page to be presented. This mark up is helpful in that it can make plain text more legible, readable, useable and ultimately more valuable to its consumer. However, because not all content consumers have the same web browsing tools and abilities, it is important not to fix the display of your content to one presentation paradigm. Instead it is important to take measures to ensure it is possible for the consumer to view the content you create in a presentation that is best suited for their needs.

How do you Separate the Two?

A good way to think of how best to present your content is to think of intentions. What are you intending to provide your users on your website? What do you think the consumers of your content intend to do with it? Is it what they want or need? It should be.

Luckily, insuring you have separated your content from its display is quite simple. Concentrate on the meaning of your content and leave the presentation to Cascading Style Sheets.

Start with plain text and build up from there.

  • If you already have content written that is in HTML format. It is easy to strip it down to just text by placing it in notepad available on all Windows PC’s… Start > All Programs > Accessories > Note Pad
  • Use HTML tags which fit the meaning of your content.
  • This is called semantic HTML. Never wrap content with an HTML which does not accurately describe its nature.
  • Never use an HTML tag just to achieve a desired look.
  • You should use HTML tags to describe the text you are placing inside
  • Be aware of how clean (or free of existing presentation markup) the content you will be using is.
  • If you are working with existing content and there is presentation markup in your HTML use one of the tag striping options
  • Make sure you are not inadvertently interjecting presentation mark up when you create new content.
  • If you are using a word processor to see if it is possible to eliminate the generation of all but the most basic of HTML elements when you convert to HTML. It may also be possible to associate the ca_master.css and your ca_agency.css documents with a template in your word processor. This will enable you to select actual classes from the editing toolbar and help you better visualize your resulting presentation.
  • Learn the styles you have at your disposal.
  • Through time, styles will be added to the ca_master.css and your ca_agency.css. Familiarize yourself with these styles. Knowing what has already been created will save you time, reduce duplicated work, eliminate future migration efforts and ensure your agency’s pages are styled consistently with the rest of California government web pages.

Use Appropriate (X)HTML tags

As you consider the meaning of your content, decide which of the following common HTML element tags best describe its nature. If you start with plain text and only use these tags you will have separated your content from its presentation.

<H1> – <H6>

Properly utilized heading tags are key to achieving a well presented page that also keeps content organized in in a semantic manner. Check out the Using Headings page to learn more about using Headings

<P>

Only use the P tag to wrap a paragraph. That is all it is for. Paragraphs only. If it is not a Paragraph, it should not have a <p> tag around it.

<BLOCKQUOTE>

The Blockquote tag is to be used only for quotes. Nothing else. Do not use it to indent text that is not a quote.

<UL>

The Unordered List is very useful for grouping lists of similar items that have no sequential relationship.

<OL>

When you have a list of similar items that have an inherent order use the Ordered List

<DL>

When you have a list of terms to define use the Definition list. An example of this is the Glossary page in the help section of this site.

<EM>

Use the emphasis tag when you want to emphasize a word in a sentence. Its default presentation is to italicize the words that it wraps.

<I>

Only use the Italics tag in special cases such as naming an author in the attribution of a quote or other literary conventions.

<STRONG>

Use the strong tag where you might normally bold something. It has meaning that says “this text is to be considered with heavier weight or strength”. Don’t over use this on a page or it will lose its strength!

<B>

Don’t use the Bold tag for text you mean to emphasize or suggest carries more weight. Bold does not have a semantic meaning; it is purely a typographical presentation tag. Use the Emphasis or Strong tag instead.

<TABLE>

Use tables to organize tabular content. Make sure you have included the summary attribute. Avoid using tables purely for layout purposes. If you do use tables for layout, be sure they are linearized properly. Before you use tables be sure you know How to Make Accessible Tables (from WebAIM.org).

<DIV>

Be sure there is not a better tag with a meaning that describes your content before you choose to use the Div tag (ie. <p> or <ul>). It has no meaning and is only used for presentation. Make sure you have properly linearized your div tags. That is to say, be sure you are visually presenting content inside divs in the same order they appear in the document. Using divs instead of tables does not necessarily make your page more accessible. A quick search on Google for “divs vs. tables” will return hundreds of thousands of discussions on the topic. Here are the two most popular results – result one, result two. Making the smartest choice is not always the most popular or the easiest.

<SPAN>

Use the span only after you have decided there is no tag that better describes the text you plan to wrap it in. The span tag has no meaning.

See a complete List of HTML Tags (from W3C.org).

Checklist 

  • Start with plain text
  • Add appropriate HTML tags as described above
  • Stop there – you don’t need to do any more styling, it is better if you don’t.
  • Apply existing classes from your style sheet to the HTML tags you just added if you really want to further style the page
  • Add new styles to your style sheet to achieve any additional styling
  • Look at your source. It should be very simple and you should know exactly what each tag is being used for.

0 Comments

Submit a Comment