Back in the dark ages of web design, layouts were lumbering beasts with heavy skeletons of nested tables and spacer GIFs. I have no regrets for designing this way; it was the de facto standard, even detailed in web site reference material. But then we entered a renaissance period: we discovered the elegance, freedom, and flexibility of tableless design using semantic (X)HTML and CSS.
Naturally, this was not an overnight process. It’s taken many months of mental reprogramming, research, trial and error, and self-education. And even then, I’m in a bit of a transition period. In many cases I’ve merely swapped out the cumbersome tables with nested <div> and excess <span> tags. It’s a phenomenon Jeffrey Zeldman coined as “divitis” in Desigining with Web Standards, and it’s only an improvement by degrees over tables-based layouts.
The next step towards design enlightenment is using more of the tools built into HTML and CSS to our advantage. That includes judicious use of class and id attributes, CSS features like inheritance and specificity, and perhaps some HTML tags you didn’t even know existed (or knew of, but not their purpose). The following are common symptoms of divitis, and how to painlessly cure your code.
Creating a container for something that’s already a container
Ever place an unordered list in a <div> because you wanted to separate it out from the rest of the text? Not only can you style the <ul> tag directly, you can even style the <li> tags for additional control. Need this list to look different from that list? In addition to being able to assign a class or id to the <ul>, consider using <ol> or <dl> if the situation warrants.
Do you need to add emphasis to a paragraph of text and not the rest of it? You could add a class to that specific paragraph. In some cases you may be able to use <blockquote> or, for short lines, a lower level header, such as <h4> or <h5>.
Tables are evil! But I still need to use them
Tables are perfectly fine, and of course valid, html, as long as they’re being used solely to display tabular data. And they have a wealth of elements to call upon to not only lend more sensibility to the markup, but also create incredible flexibility when it comes to styling. Instead of adding divs or superfluous classes to indicate table separations such as titles, footers, and columns, consider taking advantage of <caption>, <thead>, <th>, <col>, <colgroup> and <tfoot> tags. It’ll trim that much more weight from your code.
My forms will not behave
Forms are a sore spot for many designers. They have to look good, fit in the layout, and be clear and logical for people to use. Oh, and any styling needs to account for the different behaviours of form elements, unique browser rendering, and possible enhancements like inline form validation. Almost makes you want to forgo that contact form for a simple e-mail link, doesn’t it?
Fortunately, forms have a number of lesser-known elements at the designer’s disposal. Group sections of the forms together using <fieldset> and <legend>. Organize field/label pairs using <label> along with the “for” attribute. And it’s definitely in your best interest to include an id along with a name for most, if not all, form fields. Most designers will find that even after doing all of this, they still have to resort to divs to get their forms under control. By now, though, the number of extra containers you have to put in are far fewer, and you probably don’t have to nest any of them. You can’t always go for sparkling; but tidy can be an admirable goal.
This effort to curtail divitis (and its lesser known, but similarly troublesome cousin, classitis) is driven by a couple of core concepts: giving semantic meaning to our code, and separating presentation from structure. Both concepts are about making sure every tag has a significance, which in turn improves the markup’s accessibility, extensibility, and portability. In other words, the site is kinder for assistive devices, is more easily indexed by search engines, gives you quicker turnaround for updates and redesigns, and simplifies coding for mobile devices. So you can be noble and profitable.