Erik Florida

XHTML, CSS, and the Kitchen Sink

Posted on 04 / 17 / 10 Catagory: HTML/CSS.

What’s the big deal with using tables in HTML? Sometimes it is just easier to make a word bold right in the HTML, isn’t it?. Why does it matter if you use a separate CSS file, versus inline CSS? Why shouldn’t I use tables in HTML? If you, or anyone you know has asked such questions, I hope reading this article will change their minds about the usage of HTML and CSS.

If you haven’t read my previous post about the origins of HTML, I suggest reading that first. It will give you a simple background into what HTML actually is, where it came from, and what it’s purpose it.

So we understand that HTML is used purely to tag groups of text, identifying the content and providing context. But as more and more people began to use the Internet, the browser experience needed better ways to display information in an attractive and organized way. HTML tables and style elements were introduced to allow the creator of a page to give the information a consistent look to each viewer. So as the usage of the Internet expanded, so to, did the capabilities of HTML.

Here is where the kitchen sink analogy comes in. The issue is organization. Imagine you have a kitchen drawer. This draw is 2 feet wide, and holds silverware. You put deviders in so you know that when you have a knife, it goes on the right, a fork in the middle, and a spoon goes on the left. Overtime you start buying more kitchen utensils. You are handy with a saw and a hammer, so you just expand the draw. Now it is three feet wide. Now you can fit all kinds of new utensils in the draw! Now you have a better drawer, with more purposes, right? Well what happens when you have to expand it to 4 feet, and now you have so many things all piled in this one draw, you cannot find what you are looking for.

Now take the alternate case. After you fill your 2 feet draw with knives, forks, and spoons, what if instead of widening your drawer, you installed  a new, separate drawer. This drawer is 2 feet wide also, and it has compartments for separate types of utensils. Now you know, if you are looking for a utensil to eat with, it’s the draw on the left, if you are looking for a utensil to cook with, it is the drawer on the right. See how this makes things much easier to find, organize, and expand in the future? Every kitchen I’ve ever been in had more than one drawer, probably for this very reason. Compartmentalization is very important to longterm organization of important and expanding information.

Now imagine a small business, starting their Web site. It starts out with just a handful of pages, and some content describing what they do, and how to contact them. Over time that business grows. Now they want to add a blog, and they have different divisions. They want each departments to have their own pages. They want to add an intranet for employees. Suddenly the site has thousands of pages. Now what if the company needs to update the logo? Or change a color? And has anyone noticed that they don’t use the same font throughout the departmental pages?

These are common problems that can be solved much easier with well organized code. This means separate files for each part of the design. The HTML should be the base, with proper, semantic tagging, as well as good use of ID’s and classes. Well formatted HTML should never need to be updated unless new content is added. Then the CSS can be properly divided into files for typography, layout, etc. The CSS is where each element of the style and layout of the site is formed. It creates a central location to edit style-related information. When the HTML is formatted well, it should be easy to identify the specific content you want to manipulate with CSS.

If you organize data in a table, or use the bold tag, or italics, then those layout/design features cannot be changed without manipulating each HTML document where the problem exists. If you have a CSS file called typography, and you set all paragraphs to use Arial, italics, you can change this across the entire site, from one location. This structure of organized, compartmentalized information allows the content to be controlled, reproduced, and maintained much more efficiently.

Another way to look at the structure is in layers. The bottom layer is the actual content, the plain text. Then you have the HTML markup. The tags first, to identify each section of text. Then the tag attributes, such as classes and ID’s. These further define each group of tags, such as defining the difference between a paragraph on the accounting departments page, versus a paragraph on the sales departments page. Then you have the layer of CSS, which can be compartmentalized into files such as typography and layout. Then interactive content sits above that layer. Adding Flash or JavaScript elements are common examples.

Creating the site in this format, from the bottom layer up, helps to create a more accessible and degradable site. This concept will be discussed further in my next post!