Separating Content and Appearance

Basic Ideas

We have covered the basic ideas of separating content and appearance already when discussing HTML and CSS.

• When writing HTML, think about your content, not the way you want it to look.
• Choose tags so their meaning (which you will find discussed in a good HTML reference) matches your content.
• If the tags aren't specific enough, add a class or id to distinguish particular elements as semantically-different.
• Choose class and id values to reflect meaning as well, not to describe an appearance.
• If no existing tag matches the content you have, use a generic tag (<div> or <span>) with a meaningful class or id.

… and what this means when writing CSS:

• Use CSS to specify how you want pieces of content to look, in a separate .css file.
• If you need to, go back and add markup (especially class or id attributes) to your HTML as you're creating your CSS. Don't slip into saying things about appearance in your HTML when doing this.
• Don't use the <style> tag or HTML style property, which mix style information back into your HTML. If your reference uses these, find a better reference.

We haven't talked much about the third compontent: behaviour. We will do this when introducing JavaScript, and will add another point:

• Use JavaScript to modify the behaviour of your content. Don't add behaviour-related things to your HTML or CSS.

Benefits

Hopefully the benefits of creating web pages this way will become clear as you do it.

Since we have separated content and appearance into separate files, it's easier to work on them independantly. That could simply mean you can start creating content before really deciding what it will look like: it should be fairly easy to go back later and style the pages. You may have to add some tags or class and id attributes, but shouldn't have to make major changes to the HTML.

And later if you find you don't like the way your pages look, you can change one CSS file to update the apparance of your entire site.

On larger projects, there could be different people responsible for creating the content and the style for it. It's probably not realistic that they will work totally independantly, but they can mostly get on with their jobs without constantly coordinating with the others.

It is also possible to create entirely separate stylesheets for the same content. For example, you might want to create content for a presentation that looks one way while you are giving the presentation, but is reformatted if it is printed by participants.

It is also possible to use HTML content in very different contexts. For example, the EPUB format for ebooks is basically HTML+CSS wrapped up in a ZIP file. Having content and not styling information in HTML makes it easy to convert content to an ebook format, even though the way the reader interacts with it is very different (turning pages instead of scrolling, different shaped screen, maybe no colour, etc.).