Separation Of Layers: Content, Presentation, And Behavior
- Content
- Substantive information or creative material viewed in contrast to its actual or potential manner of presentation.
- Presentation
- A visual representation of something.
- Behavior
- The action or reaction of something under specified circumstances.
These are just a few crappy definitions I pulled from some online dictionaries that suit my purpose, but know them well. If there is any one thing I could hope to impart, it would be the ability to recognize these three facets of website implementation. I cannot stress enough how much a site’s content, presentation, and behavior need to remain separate.
We will get into exactly how to use these things in greater detail later, but for now we’ll look at the basic dos and don’ts.
Content (HTML)
The content of our pages, all of the text, forms, links, and certain images will be represented in markup. For the most part, it is easy to keep the content in the HTML. Where amateur web producers start to fuck things up is using HTML for something other than the content. This is called presentational markup and it was invented by the devil. What we’re looking for is semantic markup, that is, markup which carries a specific meaning within the content. Here are some common HTML elements and attributes that shouldn’t appear in your markup:
- <b>, <i>, and <u>: The tags for bold, italic, underline, and others of the same breed appear useful at first. You'll see web producers advocating the use of <strong> and <em> instead, but why? <b> and <strong> both give us bold text. What makes the <em> italic better than the <i> version? Well, what does <em> mean? It means the text carries emphasis. What does <i> mean? The text is italic. To say that a section of text is italic is to imply that it should be rendered a certain way, whereas emphasis implies something about the text beyond how it is seen. This text matters. Since in the end we can control the presentation of either tag, why not use the one with some semantic gusto?
- <font>: This is an old tag, but you’ll see people use it every now and then just the same. If you want to change the color, typeface, or size of a font, use CSS. Period. Never use this ever, ever, ever.
- <br>: As you get into building sites you will be tempted to use this tag to move to a new line. It is the wrong way to accomplish this goal 99.99% of the time. People will use this tag to get space between two paragraphs instead of simply having two <p> tags. It will be wrongly used to force a new line to create a vertical list instead of using a real <ul> or <ol> list. In general, what the <br> accomplishes visually can be accomplished using CSS, and is typically used by those without strong CSS skills.
- <hr>: It creates a horizontal bar. This is a visual element. Enough said.
- style, align, color, bgcolor attributes: These attributes affect an element’s appearance and clearly violate our goal of separation. Use CSS selectors and attributes to target the element.
It should also be noted that <table> and related elements, as well as <frameset> and related elements should not be used to achieve page layout, but this is enough of a problem that we will address it in greater depth later when we discuss CSS layouts.
Presentation (CSS)
I’m not going to lie. Getting comfortable with CSS takes practice. There are only so many things that can be said in the beginning without diving in and learning the intricacies the hard way:
- Learn the box model well. Knowing exactly what constitutes the width and height of an element will save hours of frustration. With that being said…
- Get Firebug now for the love of God. When something funky comes up, nothing will help you debug your CSS quicker than this must-have gem. We’ll talk more on this later.
- Keep reference handy. Especially at first. You’ll find yourself asking things like, “How can I get that <hr> you told me not to use with CSS?” Good reference will tell you all about your border options. <br>? Margins. Bold text? Font-weight. Underlining? Text-decoration. If you’ve been making websites using the tags and attributes listed under HTML no-nos, you will want to keep something handy to learn about their CSS alternatives until it becomes second nature.
- Ask the right questions: If you know somebody knowledgeable in the art of CSS creation, don’t be afraid to ask them some simple questions, but don’t have them write CSS for you. If possible, have them explain the whys behind the problem and solution. Learning those will be times-over more valuable than the temporary fix.
Behavior (JavaScript)
When you’re starting out, this is of little to no importance. We’ll also be discussing this in great detail, so suffice it to say for now, if there is some user interaction involving elements being hidden, moving, dragging, etc. it will nine times out of ten be a product of JavaScript (assuming we aren’t dealing with Flash).
I imagine this post will become more useful once you start building something. Every so often take a step back and refer to it just to make sure you’re keeping with the basic principle of separation.
Comments
None.