XHTML-CSS.com

So what's all this fuss about markup and style?

You said "Makeup"?

Wake up! Let's speak about information. You know these things we call brain food. Or before that, lets speak about a real meal —because a man thinks first with his belly before any idea can spark from his brain :) So we have a complete meal with a soupe, salad, meat, bread, juice and all that stuff. We have a container (the plate) and a content (the food)

What's really important here is the food, right? Great! Now, wait! What if the content is all served in the same dish? what if the choclate dessert is mixed with the beaf meat, the juice, the soupe and the bread all served in a jar? Will you still eat that? No, really? you can? I, personally, won't! I'm not that snob, but God! how disguising is thee meal!

Fig 2: Muji Meal by macglee on flickr

Fig 1: One-bowl Meal by SuziJane on flickr

Now, back to information. So lets try an analogy : foods are the information, and the recipients are how this information is served. Information served as pure text is like the water you drink directly from a fountain. Sure, text files are useful as fountain's water is, but you can't live with water only. And moreover Information isn't that elementary as water is. Information is something that's generally composed of many pieces of little information.

In fact, in a pure text file, you can't tell a header from a paragraph's line, not an emphazise from a normal phrase, you won't be able to notice a list, a table or anything else. That's because you need a STRUCTURE. Something to tell you: that's a header, that's emphazised, that's a list… etc. Something that comes in between words and phrases to make every part of the text served in its own "dish" and this is called: MARKUP. You mark words and phrases as being a header, a list, an emphazised notion…

Markup is an information that describes how information should be read, accepted and understood by our "minds". It describes the structure given to information. What goes in which recipient.

And what's style then?

So you have your tasty meal correctly served ; each food in its own and appropriate plate, is it safe to eat it? I mean, wait, maybe it's very hot, very salty, maybe melted. It's food after all, but you still won't eat that.

Now you have a well-structured information, say, in HTML. Is it "usable"? Not sure, belive me. If you have an HTML document in which the text is white on white background, and sized in 1 pixel, you won't be able to use this information all valuable it could be. Very salted caviar is not caviar, it's salt in which there's caviar. That's what style is about. Style's mission is to usefully and nicely present information.

Style is an information that describes how information should be presented to our eyes, ears, mouths or any other "senses".

So what?

Our habits, reflexes and biological machinery (including intelligence) make us easily drink water that is safe —well, almost always… That's not the case for information.
When you emit any information, think about the fact that the chances to have a user with the same habits, reflexes and biological stuff than you, are very very little. We aren't even using the same browsers, are we?

That's what standards are for, justly: a set of rules that make our works available as much as possible in the same fashion to everyone.

But these standards expect you, before you jump on them as if they were the golden key, to tell what is the real content from the style in the information you're about to serve.

This is what is commonly known as "The content-presentation separation", and this will be the subject of our next tutorial. Till then have a nice day and don't eat just anything. No, really, it's unhealthy :)

Quizz

You can answer these questions and discuss your opionions in the comment form below.

1. What's more important in information? The information itself? Its markup, or its style? Why?
2. Who's the consumer of your webpage information? The browser, or the user that uses the browser?
3. Suppose you talk to someone and he/she doesn't really understand what you're saying. You insist on a special word that you pronounce in a different tence. Is what you're doing style or markup?

Enjoyed this post? please subscribe to our feeds to stay informed.

Comment [2]

— Razvan Girmacea · Jan 13, 06:34 PM · #

Great analogy there XHTML-CSS team. This question about why should we use standards is raised by a lot of us. I use them, but is hard for me to explain to someone.

— Edward · Jan 18, 05:50 AM · #

the photo say it all….

Commenting is closed for this article.

« Previous post: w00t ! del.icio.us told me: take dat in ya face!
Next post: » New year, new resolutions!