For sometime I’ve been evangelising about building Web sites with valid XHTML, using CSS for presentation and layout. I’m far from alone in this mission and the message is going in. However I’ve noticed that developers learning the new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.
One of the prime goals of moving to XHTML/CSS is to make the HTML documents more meaningful by removing code such as font tags – well div and span are just as meaningless as font. So I have this piece of advice for anyone switching to the XHTML/CSS way of coding:
Now before you turn away, branding me as a slave to semantics, I will explain some of the common misconceptions to show how the number of divs and ids can easily be reduced.
Firstly, divs and classes are often used to replace more appropriate mark-up, classically headings:
<div id="mainheading">Page Title</div>
<p class="subheading">Sub heading</p>
#mainheading {color:#000}
P.subheading {font-style:italic}The first line creates an id for a heading. In the second example we see poor use of a paragraph (is ‘Sub heading’ really a paragraph?), resulting in the creation of a class. We could more meaningfully code these:
<h1>Page Title</h1>
<h2>Sub heading</h2>
H1 {color:#000}
H2 {font-style:italic}Many folks equate CSS layout with using divs, but remember any style that can be applied to div can also be applied to p, form, ul, fieldset, blockquote and every other block level element. For example, forms are often floated to the right by wrapping them in a div:
<div id="feedbackform">
<form action="feedback.pl">...</form>
</div>
#feedbackform {float:right; width:30%}However the div is not required as one can style the form directly:
<form action="feedback.pl">...</form>
FORM {float:right; width:30%}This will apply the style to all forms. If this behaviour is not required then give the form an id:
<form action="feedback.pl" id="feedback">...</form>
FORM#feedback {float:right; width:30%}There is also a tendency to apply unnecessary classes and ids, for example:
<form action="feedback.pl">
<p class="field">Name: <input type="text" name="name" /></p>
<p class="field">Email: <input type="text" name="email" /></p>
...
</form>
.field {margin:0}Here the ‘field’ class is superfluous as we can apply style to every paragraph in the form:
<form action="feedback.pl">
<p>Name: <input type="text" name="name" /></p>
<p>Email: <input type="text" name="email" /></p>
...
</form>
FORM P {margin:0}Divs should only be used when grouping related elements together. For example, a typical ezine page may contain a header, story, side bar and a footer. The story will contain a heading for the page and any number of paragraphs, tables, lists and so on, so it seems reasonable to wrap all of these in a div.
Similarly the sidebar may contain a list of related links and a feedback form; again it seems reasonable to group these together. Note that you still only need one div and one id for this as anything inside the sidebar can be selected specifically:
<div id="sidebar">
<ul>
<li>...</li>
</ul>
<form>...</form>
</div>
#sidebar UL {font-size:75%}
#sidebar FORM {background:#ccc}So here’s your mantra for today: ditch divs and eliminate ids for leaner, more meaningful mark-up. See also Standards don’t necessarily have anything to do with being semantically correct at Kottke, On Standards and Semantics at StopDesign and SimpleQuiz at SimpleBits, which are all generating good discussion on the subject.
Wild wrote:
Thanks Richard, that was really useful.
Good stuff.
Darren wrote:
Thanks also, a very clear explanation of stuff I have always struggled to understand.
drowsy wrote:
Nice. I mostly in favor of losing classes, but I gotta use IDs for DOM-based hijinks. I think your DIV comments cover that. Your comments are good food for thought today.
Micah wrote:
> Dont use divs or spans.
> Dont use classes or ids.
Except for the exceptions? And there are many reasonable exceptions. For example, until XHTML 2.0 is adopted and implemented, there is no L tag to mark up, say , lines of poetry. With XHTML 1.0, the most semantically correct way to do that is with a SPAN.
Or, how to mark up an inline book title. The best solution I can come up with (in the absence of extending XHTML through XML namespaces, which I don’t understand and you didn’t mention) is <span class=”book title”>Name of Book Here</span>. Or even adding CLASS=”book title” to an Amazon.com link.
I think my point is that those two rules are good, but that there are many reasonable exceptions within XHTML (like I said, XML is another beast). And I agree with you 100% that too many web designers only half-embrace the semantic richness of available XHTML tags.
Micah wrote:
A quick note: sorry if I sound negative every time I post on your weblog. I’m a frequent visitor, think you write very well, and that you have one of the most beautiful page designs out there. I just don’t mention it often enough.
Arikawa wrote:
<form action=”feedback.pl”>
<p>Name: <input type=”text” name=”name” /></p>
<p>Email: <input type=”text” name=”email” /></p>
...
</form>
In this case, I would suggest using a more meaningful label tag rather than p.
Anyway, great read!
Taylor wrote:
As with everyone else, thanks for the great explanation, as im definitely guilty of getting a big div happy at times.
Phil Wilson wrote:
Except for the exceptions indeed.
For visual styling of elements, people should indeed be applying the styles direct to the relevant elements, but for page layout this is almost impossible to do. divs are necessary.
If and when IE either ever supports selectors properly (e.g. +, >, first-child), or it loses its market dominance to something else which does, a lot of positioning is only possible via divs/spans.
It’s interesting, for example, to look at the source for this page and to spot:
<h1>Weblog comments: <cite>Mark-up tactics</cite></h1></div>
I agree with your sentiment, and people do use unnecessary divs sometimes, but in practice they’re the painful reality of browser limitations.
Sérgio Carvalho wrote:
“Don’t use classes or ids” is a horribly strong statement. Probably there are misuses, but for some cases, there’s really no correct XHTML markup containing the semantics the code should reveal.
The rule should read: “Don’t use classes where XHTML already provides relevant markup”.
First case in question: The form example:
<tr> ... <td class=”date”>05/10/1976</td> ... </tr><form action=”feedback.pl”>
<p class=”field”>Name: <input type=”text” name=”name” /></p>
<p class=”field”>Email: <input type=”text” name=”email” /></p>
...
</form>
In this case, more meaningful markup should be used, namely the label tag:
<form action=”feedback.pl”>
<label>Name: <input type=”text” name=”name” /></label>
<label>Email: <input type=”text” name=”email” /></label>
...
</form>
Second case to be looked at: A table of data, where one column is a date. Clearly, the relevant TD elements should be classified as date, so they can be properly styled:
<table>
</table>
Classes semantically complement markup. They’re a secondary tool, but an important one nevertheless.
Rich wrote:
Sergio – your points are all well made and correct, however you’ll notice that while I say don’t use classes or ids I go on to provide and example of where an
idwould be appropriate.The point I’m trying to get across is that very often too many classes and ids are used – beginners do not often spot when such selectors are unnecessary and their style sheets grow to huge proportions and become just as unmanageable as old school tag soup.
My ‘no classes’ rule is a guideline intended to be broken – the idea is to make the author think twice before applying a class or writing a div.
And yes, you would think my forms example should use
labelinstead ofpexecpt thatlabelis an inline element, which are not allowed inside forms in XHTML Strict. You can however nest inline elements inside block level elements, so maybe this would be better:<form action=feedback.pl>
<p><label>Name: <input type=text name=name /></label></p>
<p><label>Email: <input type=text name=email /></label></p>
...
</form>
Stuart wrote:
You could always put the form elements inside a <fieldset>.
There is indeed something perversely satisfying about using markup tags exactly as they were intended to be used.
Jens Meiert wrote:
Unfortunately, this problem is still up-to-date, and thus this still is an useful article.
But, though I also prefer source code without classes and IDs (see my article on contextual selectors [1], German, or the style sheets of some of my sites, e.g. [2]), they also possess semantics (for example, ‘class=”error”’ vs. ‘class=”red”’), and they might be necessary due to scripting. This article could point this out, too.
[1] http://meiert.com/de/releases/20050107/ | [2] http://uitest.com/