We have two different technologies for content and the way it looks: HTML and CSS. The idea behind these is that the two different roles are kept separate using the two languages.
If you have been following the advice in Semantic Markup, then this shouldn't be too hard. The way you write your HTML should still be about content: choose markup based on what the pieces mean and what are they for.
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
orid
to distinguish particular elements as semantically-different. - Choose
class
andid
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 meaningfulclass
orid
.
… 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
orid
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 HTMLstyle
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.).