Designing With Web Standards

Trent Lucier writes "If you've browsed the web design section of any bookstore lately, you've seen him staring at you. The blue hat. The mustache. The blinding neon background. He's Jeffrey Zeldman, publisher of the influential web development magazine, 'A List Apart' and author of the book Designing With Web Standards (DWWS). The first edition of the DWWS was published in 2003, and now 2006 brings us an updated 2nd edition. In a market flooded with XHTML, CSS, and web standards books, is DWWS 2nd Ed. still relevant?" Read the rest of Trent's review for the answer. Designing With Web Standards, 2nd Ed. author Jeffrey Zeldman pages 410 publisher New Riders rating 8.5 reviewer Trent Lucier ISBN 0321385551 summary Foundations for creating standards-based websites using XHTML and CSS.

DWWS is more of a survey course than a deep dive into a particular topic. In fact, a large part of the book is dedicated to the philosophy of web standards, as opposed to their specific implementation. The reader is given background information on the turbulent early years of the web, when Netscape and Microsoft battled each other with proprietary features, driving coders crazy and sending development costs through the roof. Inconsistent support for HTML, JavaScript and CSS often meant that a single page had to have multiple versions written to support different browsers. Predictably, many companies decided to "standardize" their websites on one browser (usually Internet Explorer), causing much pain for users who wanted or needed to use other programs.

Out of this mess came the web standards movement, whose goal was to encourage browser-agnostic design practices. However, the web standards proponents faced several problems at the outset. "Standards compliant design" was synonymous with "ugly." CSS was a 4-letter word, due to buggy and inconsistent browser support. Additionally, few people understood that standards compliance was a continuum and not an all-or-nothing affair.

Which brings us to Zeldman's book. Part 1 of DWWS explains the concepts above in terms that non-technical people can understand. The book states that it is for "designers, developers, owners, and managers..." Of course, the idea that a non-technical person would choose to read a book on web standards doesn't comply with what I like to call "reality." But tech leads may find some ammunition in these chapters for their arguments with management about the benefits of browser-neutral web design.

XHTML and CSS are the main focus of the second part of the book. Readers without any HTML experience will likely have difficulty following these chapters. Those with some experience will learn to master the DOCTYPE, tame font sizes, and conquer annoying Internet Explorer bugs.

Zeldman is a pragmatist, never forgetting that his readers live in the real world with real limitations. Some developers still have to support older browsers, or integrate with proprietary technologies (ex: Flash and Quicktime). He recommends solutions for these circumstances, letting his audience know the pros and cons of each approach. Early in the book, Zeldman states his motto of "No Rules. No Dogma." The book adheres to that statement, explaining that some standards can be maddeningly vague, or that the XHTML Strict DOCTYPE isn't for everyone.

As always, Internet Explorer 6 requires special attention. The (in)famous CSS box model hack is explained, in which jujitsu-like techniques are used to fix one IE bug (the way width is measured) by exploiting another (broken support for the CSS voice-family rule):

.content
{
width:400px; /* All browsers read this line */
voice-family: "\"}\""; /* IE chokes here and bails out of this block */
voice-family:inherit;
width:300px; /* Other browsers make it to the end and use the correct width */
}

Every time someone codes this, a kitten dies. But it is valid markup, and it is used by many standards supporters. A few references to IE7's improvements are sprinkled here and there, but this book was published before the browser was formally released so don't expect too much info.

One of the hottest topics in CSS is the pure CSS-based layout. Pure CSS layouts usually involve the concept of floating elements and calculating widths. In DWWS, we get a chapter dedicated to the hybrid layout. Hybrid layouts make use of CSS and HTML tables to layout a page, although the table usage is minimized. Zeldman is correct to take this approach, which gives readers practical advice and then lets them decide if they want to move on to more complicated CSS layouts.

The chapter on accessibility is one of the most illuminating. Zeldman has well-reasoned retorts to all the common graphic designer excuses for ignoring accessibility. Accessibility does not mean that a site has to be ugly. Rather, accessibility is something that happens under the hood, in the markup itself. The business case for accessibility is also strongly made. Think you can ignore blind users because your flashy site targets a small, hip audience? Be prepared to get punished by Google, since the GoogleBot is the most powerful blind user on the web ("The Blind Billionaire", as it is called in the book).

A brief chapter is dedicated to DOM-based scripting (aka JavaScript), and the discussion is mostly limited to what scripting can do, and not how to do it. The DOM (Document Object Model) is the model for describing the hierarchy of content on a webpage. Modern techniques like AJAX make extensive use of the intimate relationship between XHTML, CSS, and JavaScript DOM support. However, accessibility, usability, and maintainability are still challenges in the hyper-scripted world of Web 2.0. Zeldman doesn't offer much advice on these topics, but provides a book list for further reading.

I have not read the first edition of DWWS, but the second edition makes it clear where Zeldman has changed tactics and techniques. For example, the image replacement technique described in the first edition wasn't accessible in certain screen readers, so improvements are suggested in the second edition.

Overall, DWWS is a good book for web developers that already know the basics of HTML and CSS, but want to update their 1997 coding techniques. Those new to web design, however, may want to start with a book that is a little more comprehensive. Zeldman does a good job of explaining how to create leaner, lower-cost, and more maintainable web sites. On more than one occasion, I put down this book mid-sentence, loaded up my text editor, and was able to make a quick change to solve a problem that was bugging me. In a book dedicate to making the web designer's life easier, what more can you ask for?

Trent Lucier is a software engineer. His latest experiment is localhost80.com

You can purchase Designing With Web Standards, 2nd Ed. from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

Comments

In my experience.

[Kenja]

In my experience, you can do it with standards, or you can make it look like the client wants it to look like, which requires at least two sets of scripts for the diferent browsers. Then you run into things like ActiveX maps and OWC objects and give up on it working in anything other then IE. Then you go have a stiff drink.

Re:In my experience.

[Kenja]

I'm doing web dashboards for 6SIGMA and ISO systems. I'm trying to hammer together OWC, ActiveX, Lotus Domino, Apache, JBoss, mySQL, Flash objects, kettle, jfree reports, and a bunch of other stuff.

If it works in any browser at all I'll call it a sucsess.

Re:In my experience.

[metlin]

Obviously you have not had to interact or work with other third party applications. Try having a Siebel app look exactly the same on Firefox. :-\

A lot of these applications use almost entirely ActiveX and simply do not work well with alternate browsers. It simply isn't possible, and sometimes you just have to resort to having the app supported on just one browser.

Then why do companies use them? Legacy.

You see, these apps have been around forever, and people have been using them forever with a lot of investment made into them, and folks aren't ready to just give it all up. Of course, they ignore such things as TCO (e.g. having a Microsoft environment with IE, money spent on security and combating worms etc).

So, the end result is problems like this.

Re:In my experience.

[grcumb]

If you say it will cost twice as much and take twice as long to support another 15-20% of the market thats a losing argument.

Look, I failed math three years running in high school, but it still only took me about 1.7 seconds to spot the logical flaws in your equation:

• If you believe that using CSS and web standards take twice as long and cost twice as much, then you've never seriously tried to use them. And you've certainly never had to manage style changes over tens or hundreds of thousands of documents, or even a few dozen dynamic pages. CSS is one of the greatest gifts to web design I've seen since I started developing websites back in 1995.
• Just because results don't scale with effort doesn't mean that it doesn't make fantastically good sense to invest more in a development project in order to get it right. The first question you have to ask is, 'How big is that 15%?' Believe me, if that notional 15% earns you hundreds of thousands for an investment of another 10-20K, there's not a manager in the world wouldn't go for it. But you'd have to be able to do math to explain it.
• If you think that using web standards affects only the (significant) minority of users who don't run MSIE, then you don't understand the issue. Web standards ensure consistency, simplicity and predictability. Any good project designer knows the importance of these, and will fight hard to ensure that they're adhered to. One of reasons behind Google's great engineering triumphs in scalability is their ability to focus on simplicity. They don't have a blind adherence to standards (no one should), but you can see a clear preference to keep things simple, consistent and platform-neutral. Standards help achieve this.

IME, staying away from the perils of complexity is much easier when one focuses on sticking close to the standards, and to avoiding most of the pointy-clicky 'web development' toolkits around. There's simply no substitute for a clean, hand-crafted implementation automated carefully and sanely. It keeps maintenance costs down and makes it possible to scale with far fewer of the headaches associated with proprietary - and constantly, arbitrarily changing - pseudo-standards.

Re:In my experience.

[FST777]

Exactly.

I develop some pretty interesting apps with ECMA-script and CSS, and my practise is this:

1. Write a piece of code with standards in the back of your head, and test it with Firefox. Then retest in Konqueror (I'm an avid KDE-user).
2. Code the whole app this way
3. Boot into Windows, test with IE7. Not much changes needed, 99% works.
4. Fire up IE6. Cry, and regain temper.
5. Adjust so that IE6 works, without breaking the original functionality. Don't use browser-checks. They'll bite your ass later.
6. Test in Opera. Most just works when it already does in FF and IE6, so no harm there.
7. Retest everything cautiously in all five mentioned browsers and adjust as needed. IE7 might pose a problem due to the fixes for IE6.

All in all, the basic coding still is the major part of programming for me. The adjusting for the different browsers is not that much of a hassle.

Standards are nice, but when it works with Gecko, IE6, IE7, KHTML and Opera, it's good enough. For basic webpages, Lynx is also a testbed for me (with regard to spiders).

Re:what I want

[0racle]

Now that would be a good book. "Designing with Web Standards that are Followed."

Re:I must say.

[truthsearch]

Microsoft did start adhering to the standards. They just stopped long before they were done.

yeah

[nomadic]

Like I'm going to take advice on how things should look from a guy with a moustache.

If it was easy, everyone could do it

[fractalus]

For old hacks who are thoroughly used to table-based layouts, as the only kluge that worked consistently, CSS is a tough sell. From an old rant on this topic where I quote a friend of mine who builds sites:

See I'm not a fan of the pure CSS sites. [It] makes updates and general maintenance a pain. We've done a few sites that way and they are the ones I hate working on when [the] client calls with updates, enhancements, etc. ... I can make a table and format a page in two seconds, versus looking up styles or creating new ones, using guess and check, checking all browsers. ... Tables don't cause any problems if they're done correctly, so why make my life more difficult to use pure CSS, when 9 [out of] 10 times the site is going to be very graphically driven.

That was from a year ago. Now even he has seen the light and is starting to build standards-based sites. It just took a while.

One invaluable resource for identifying browser CSS support is this page which has nice pretty colors showing the amount of support.

Re:If it was easy, everyone could do it

[soliptic]

What a genuinely bizarre thing to say.

CSS ... makes updates and general maintenance a pain. We've done a few sites that way and they are the ones I hate working on when [the] client calls with updates, enhancements, etc

Updates/maintenance is one of CSS's strongest points. Client wants all the links green instead of red? Look in my style.css, change a { color:#f00; } to a { color:#0f0; } - instead of pick through 50 pages looking for every <font> tag inside an <a> tag. Client wants the left hand navigation column to be a bit wider? Look in my style.css, change div#leftnav { width: } to something bigger. As opposed to picking through 50 pages trying to work out whether it's the fourth level of nested <table><tr><td> which controls that, or the fifth level.

If he wanted to complain about CSS designs being less consistent than table based ones I could somewhat understand his point. (Although I'd still say he needs to google the IE box model, take his pick from any one of several very easy solutions (including CSS hacks like the Tantek hack; abandoning padding and using only margins, with extra wrapper divs if necessary; serving different CSS to IE via conditional comments...), and then realise the majority of his layout issues have vanished...)

Then again, judging by this:

versus looking up styles

it sounds like he was just lazy and didn't want to learn something new. Looking up styles? Oh noes. Really, you've only got to do professional CSS-based design work for about a fortnight and you've memorised the 90% of the stuff you need on a regular basis. For the more esoteric bits that you do need to look up, it's not like there isn't a vast amount of CSS reference material just one click away.

Tables don't cause any problems if they're done correctly

Well, apart from the huge nest of tables inside cells inside tables inside cells inside tables being (a) a waste of bandwidth and (b) far harder to write and maintain. And being piss-poor for people browsing with screen readers, and by divorcing content from presentation completely all kinds of interesting microformats / data mining / semantic web type of applications become totally impossible.

Re:If it was easy, everyone could do it

[Shados]

If it wasn't for IE, yeah. What I had in mind when i made my exageration was vertical centering, which depending on your needs tend to take 3 div tags to make it perfectly cross-browser and working peachy in pure CSS.

I've looked for some trick that I could be missing, but everywhere I looked, it tend to be that. Of course, you can lower the amount needed by using, as you send, the inside elements, but often its still required to have quite a few too many divs. Being able to use display:table-cell in IE would probably shave these occurences by a lot though.

My gripe so far though is almost purely with 3 things. #1: positioning of elements that do not have fixed sizes (if you fix sizes, then things are a total joke), #2 vertical positioning (mostly fixed once the browser installed based support of table-cell is higher), #3 positioning/sizing of elements that are not tested, relative to each other.

All of this is definately possible. Its just not as clean as it should be, in my opinion. If javascript is a possibility (let say for an internal application), then all problems can be fixed in 5 lines of code and be 100% cross browser, but thats not always possible.

And hey, i'm not the guru among gurus, if there are tricks I haven't been able to find to handle all this over time (very possible), i'm always open minded to learning more stuff. But I spent quite a bit learning all the quirks I could with no easy solutions. :)

Re:I must say.

[smooth wombat]

I don't really think that there's anything particularly special or important about the W3C that makes their arbitary standards better than somebody else's arbitrary standards.

Too bad the standards aren't arbitrary. The W3C is an international consortium which holds meetings to try and get a consensus on what a web standard should be. Microsoft is part of this consortium but even after agreeing to the standards, chooses to ignore them.

So who's fault is it again for not following the standards?

Tables should not be used for layout!

[Geof]

For example, if the floating divs are acting different in each browser, use a table.

Standards-based design is not just about browser compatibility. It's also about separating style from content. Tables are for tabular data, not graphic design. What you describe is the HTML equivalent of spaghetti code, and it's one of the main targets of Zeldman and other of proponents of standards-based design.

HTML (unlike, say, PDF) is not a layout language. Tags are meant to describe the content they enclose, not specify how it is to be displayed. It is the job of CSS to present that content in different contexts. Violating that separation, for example using tables for layout, makes maintenance difficult because content and style cannot be modified independently. It denies users the ability to re-style your content (e.g. with custom stylesheets). It creates barriers to accessibility for those who do not interact with computers visually (e.g. those with disabilities), or who use other devices to access the web. It misrepresents the content of web pages to machine analysis - search engines, for example, use tags to determine the role and importance of text on a page.

Of course, the reality of the HTML and CSS standards and their support in popular (*cough*) browsers is somewhat different. It is sometimes necessary or practical to misuse HTML as you describe. But it should not be done without an understanding of the standards and the consequences of ignoring them. Books like Zeldman's give designers and developers the knowledge and tools they need to use HTML and CSS correctly where possible, and to minimize abuse otherwise.

For some reason, programmers seem to be trailing designers when it comes to understanding how to use HTML and CSS correctly. They figure if it looks right, it must be right. That was certainly my attitude. Perhaps it's because we don't take designers or HTML seriously ("it's not Turing complete!"). I don't know. But do read Zeldman or Eric Meyer or someone like them, either in hardcopy or online. Knowing how do this stuff right made me a much better web programmer.

Re:Tables should not be used for layout!

[Bogtha]

Standards-based design is not just about browser compatibility. It's also about separating style from content.

There's a strong correlation between people who adhere to the W3C's specifications and people who separate content from presentation, but that doesn't mean that they are the same thing. <font> and <table> are in the HTML 4 and XHTML 1.0 specifications.

Conflating the two leads to people claiming stupid things, like that they are writing "standard" code because they use CSS, when in fact their code is non-standard and full of hacks.

I know over the past few years "web standards" has become a popular buzzword, but there's a difference between best practices and conformance to particular specifications. Just because it's a good thing, it doesn't mean the specifications require it, and jujst because it's in the specifications, it doesn't mean it's a good thing.

Re:Tables should not be used for layout!

[wkcole]

any more than tying a bow around a piece of shit makes it a present.

of course not, silly.

It's the thought that counts.

Re:I must say.

[suv4x4]

Microsoft did start adhering to the standards. They just stopped long before they were done.

They actually *created* a noticeable chunk of said standards.
Microsoft employees were part of the CSS, XML, XHTML creation committees and had significant contributions to those standards.

You can however understand that a commercial company where time is money and money is matter of survival in a market developing with a furious pace would be disappointed at the speed at which W3C works.

IE6 was abandoned for no other reason but the creation of what is today known as .NET 3.0 (a.k.a. WinFX a.k.a .NET 2.0 + Avalon + Indigo etc), XPF and other standards which would've taken decades to produce at W3C.

You gotta applaud Microsoft that for all crap they spew at times, they are brave enough to stand on their own versus copy verbatim what their competition produces (no I'm not being sarcastic). .NET 3.0 is an amazing achievement and I'm sad to admit that despite Microsoft's ambitions to turn it into a cross-platform environment it may remain mostly a novel (and exciting) way to produce great looking and functional Windows applications.

But Microsoft's work is what caused Macromedia (now Adobe) to produce the gem Flex 2, which is viable alternative for web applications running on all major platforms.

Anyway not to get carried away, now that Microsoft have realized their strategy and "vision" with .NET 3 (and partially with Vista, though it's apparent this is not their final word on what Windows should work like), they are catching up at full speed with the standards, and IE7 is a huge step in the right direction.

Their (public domain) extensions to RSS are also creating incredible new ways for people to interact with web content.

Unfortunately...

[8-bitDesigner]

Many of the more persistent issues in IE6 aren't due to impelementation of the CSS standard (or lack thereof), but rather of bugs. I mean, sweet baggigty, how on Earth can you predict if IE6 is going to double the margin on a floated element or not? Hell, it's a "here today, gone tomorrow" issue for a full-time web designer.

And don't get me started on the peekaboo bug. That one alone took me a day and a half to figure out. For the most part, IE7 will respect web standards (and hell, even better than Firefox 2 in some places), but for IE6, and parts of IE7, you just need to build a nigh-encyclopedia knowledge of various bugs and workaround.

A List Apart and are fantastic resources for bug hunting

You're missing the point of separating style

[Geof]

"banner", "navigation bar", "links", "headings", and "columns" are some of the most common categories of tabular data used on the web. Just because the only information you, personally, want to display happen to be multiplication tables, doesn't mean you're the only one allowed to use a bunch of rectangles to display your content.

Let's hold our horses and calm down a bit. You are confusing data with presentation. HTML is for content description, CSS is for presentation. Use the right tool for the job, and you can get the effect you want - without using HTML tables. And you will gain accessibility, maintainability, and so on.

The banners, nav bars, headings etc. that you mention are not tabular data. They do not necessarily have rows and columns. A navigation bar, for example, is typically one-dimensional, not two: it's a list of links - hence current best practice is to represent it in HTML as a list (<ul> or <ol>). Because these things are not tabular data, they should not be represented in tables.

Again, HTML is not a layout language. HTML tables are more like database tables than a grid system; like database tables, the relationship between rows and columns exists regardless of what they look like. The browser chooses how to display that information - typically in a tabular format, by applying CSS. That's right, CSS that specifies the layout, not HTML. You can use <div>s instead of <table>, <tr> and <td> tags and still display your information in a tabular format by applying the correct CSS table properties. These properties are about presentation, they say nothing about the nature of the data.

In your case, the banner should probably be something like <div class="banner">, the headings should be <h2>, <h3> etc. (that's why they're called heading tags), and the columns should probably be <div>s, located correctly with CSS (there are some very clever ways of doing this involving negative margins and the like (see A List Apart), none of which force you to misrepresent your data as tables - though in a few cases, using a table for columns is the most practical solution).

No one is telling you what your web pages should look like. They are, however, recommending the most effective, flexible, accessible, and maintainable ways of getting that look using the tools available. Using tables for layout is seldom any of those things.

Stop using a CSS as an excuse to produce poor HTML

[HaMMeReD3]

Who was the idiot that decided now that we use css for our layouts that tables and such can just be deprecated. Tableless layouts are NOT a good idea, although the need for tables has dropped significantly since the introduction of css.

For example, in the header of my site, I want 3 columns, a left,right, center, with different aligns on each.

The "CSS" solution would look something like this.
<div class="header">
  <div style="float:left;text-align:left"> Left Content </div>
  <div style="float:right;text-align:right"> Right Content </div>
  <div style="text-align:center"> Center </div>
</div>

Now this may not have any tables in it, and produces 3 columns, the float order is odd (if I put the float:right after the center, it'll start on a new line since it's after a non-floating div). Also Floats tend to not resize that well in firefox for some reason, leaving ugly trails that look like dragging around a window on a frozen windows desktop.

Now when I start adding more and more content and fine tuning it in the floating div's, it starts to become a confusing mess and become hard to tweak and manage precisely.

With a table, the same effect is achieved with slightly less code.
<table width="100%"> <tr>
  <td align="left"> Left </td>
  <td align="center"> Center </td>
  <td align="right"> Right </td>
</tr> </table>

Also, lets not forget the fact that my table can be fully styled with css as well. So my point being that don't use div's for a solution where another tag exists to solve your problem.

It's good css practice (not professional practice, educational FOR LEARNING practice) to write a site completely in div or spans, but most these other tags are not going anywhere soon, and provide context for your document, for example, in a layout I'm working on now, I use styled <ol> to achieve the same effect that I would traditionally get from a table. I could also achieve the same effect using a series of divs or with styled tables. Although the <ol> makes the most sense when viewing the source because the nature of the content in it is a list, a series of divs or a table would make it a lot harder to immediately distinguish this list.

Css opens possibility of styling your html in many ways, but I can't emphasize this enough CSS IS NOT XHTML, it does not excuse you from ignoring tags because a div with the proper css can produce the same effect. Just because you can do an entire site with only div tags does not mean you have to.

HTML is there now to provide context to the document, and if something is a list, it should be stored in a <ol> or a <ul>, if something resembles a table, it should use table tags, etc.

The idea is that the implementation of the html and the css should be done in which the html document shows clear context, and the css should be based on that context so that there is a clear separation between data/display. using divs and spans only makes it hard to identify context (aside from the classes your using). And when you spend more time solving a problem with div's that a table would still solve in 10 seconds, then you are wasting your time.

future proofing the web

[arifirefox]

When someone makes a site that's IE only, he's not just hurting firefox and opera users. It makes it much more difficult for it to be compatible with future versions of IE. Such short sighted thinking...

Too bad CSS isn't better at layout

[PapayaSF]

Again, HTML is not a layout language.... That's right, CSS that specifies the layout....

True, but my question has long been: why is CSS not better at layout? Say I want a page with a header, three columns of content, and a footer that gets pushed down according to whichever column has the longest content. That's a very common layout task, and it's dead simple to do with a table, but so difficult with CSS that (the last time I checked) it was considered a difficult problem even for authors of CSS books! (I haven't tried your link to the Holy Grail on A List Apart, but you must admit that a layout solution that relies on negative margins is the very definition of a kludge.)

Don't get me wrong: I love using style sheets, and most of the time I'm grateful for CSS. But I hate it that some important things that were once easy have now become hard, all in the name of avoiding tables.

Re:Too bad CSS isn't better at layout

[dizzoug]

Seperating layout from content isn't such a big deal either IMO because a) 99% of the time your html has to be in a very specific order for your layout to work, not to mention the 8000 wrapper divs and what not you have.

If designed properly, the order of your XHTML will matter very little when seperating layout from content. Also, designating many different div tags as wrappers is needless in most situations. You just need to think through a layout idea before coding a single line.

b) Most websites run off a scripted/coded backend where most of the content is pulled from a database anyways

Regardless of where the information for a page comes from, you are always in control of how it is rendered to the browser. The rendered XHTML, CSS, and Javascript is where the seperation of layout, content, and behavior is helpful.

Doug

Re:Too bad CSS isn't better at layout

[Stone Pony]

"why is CSS not better at layout"

Because CSS stands for Cascading Style Sheet; and style and layout are not the same thing. Style is fonts, colours, line spacing and stuff. CSS is great for style, particularly so where you want to apply a single style consistently across many pages. Layout is about how the building blocks of the page hang together. You can do this using CSS, in the same way that you can handle style using html, but it's not ideal (although on balance I'd rather use CSS for layout than html for style). All of the CSS kludges I can think of right off the top of my head relate to problems of layout, rather than style (unless you want to count image-replacement techniques, which I suppose are a sub-set of style, rather than layout).

Re:Stop using a CSS as an excuse to produce poor H

[Aladrin]

I totally agree. I tried to be a CSS-zealot for a while. I even made the mistake of trying to totally avoid tables except for 'tabular data' and I am seriously paying the price for it now in the application I'm working on. It's very tempting to go back and rework it so that I don't have to worry about it any more.

The issue? jQuery. There's a TON of neat things like slide and calendar than simply break my CSS, no matter what I do. If I'd designed more simply, with a well-placed table or 2, then I'd have a great looking interface AND be able to use jQuery's Interface plugins.

Re:Stop using a CSS as an excuse to produce poor H

[HaMMeReD3]

Well the goal of any good developer should be to implement the solution as elegantly and simply as possible. Being a css-zealot is not bad, as long as you don't go out of your way to say "look what css can do". It's about using the right tools for the job at hand.

Re:It's definately possible.

[ubernostrum]

If you can use javascript to help with some more complex positioning (especialy relative resizing and such), XHTML 1.1 really isn't bad at all.

Um. Yes. Yes, it is. XHTML 1.1 is an utterly useless format, but not for reasons having anything to do with CSS; per the W3C's notes on media types for XHTML, XHTML 1.1 should be served with the MIME-type application/xhtml+xml, and never with the MIME-type text/html. But Internet Explorer, even IE7, does not understand this MIME-type (though, to be fair, they've only had seven years to get this right; I figure by the time we have flying cars and robot maids, IE will handle the XHTML MIME-type just fine) and will display its generic "I don't know what to do with this file, do you want to download it?" dialog.

XHTML 1.0 does have provisions for being served as text/html, but there are deep issues with that which most people who use XHTML are blissfully unaware of (hint: all modern web browsers treat XHTML-as-text/html as an unrecognized language, and kick into "tag soup" mode to parse it); if they ever switched to the XHTML MIME-type, or even to an XML MIME-type like application/xml (which works in IE, and is permitted for XHTML but not the recommended thing to use), they'd be in for some nasty surprises.

XHTML, at this point, is basically dead in the water; hordes of people switched to it because it was the latest and greatest, but did so with no understanding of how XML actually works or the constraints created by reformulating HTML in XML. It's only the fact that none of them are actually serving it as XHTML -- because everybody just goes ahead and uses text/html -- that's saved them from their ignorance thus far. Even the W3C seems to have reluctantly accepted this, with Tim Berners-Lee recently announcing that there will be a shift from the "forget HTML, XHTML is the only way forward" mentality to a revival of the HTML working group and a series of gradual refinements and improvements of HTML until (if ever) the world is really ready for XHTML. Which could be a while; a couple years ago, Evan Goer took a sampling of 119 sites which claimed to use XHTML, and tested for valid, well-formed XHTML served using content negotiation to send the proper MIME-type to browsers which understood it. Of the 119 sites -- cherry-picked to include a large concentration of professional web designers and developers, who really ought to know how to do this right -- only one was found to conform, and 74% failed the first step of checking the W3C validator. In the two years since, he's managed to find about a hundred sites on the entire Web which are correctly doing XHTML. 99 sites in two years isn't a rosy picture.

AJAX benefits from clean HTML

[Geof]

If you want true separation, use XML for the data, and XSLT to transform it into HTML.

That's what I used to do too, until I read Zeldman. I loved it. One of the big disadvantages, however, is that you lose the semantics of HTML (such as they are). Those semantics are valuable - for search engines (clean HTML can make a big difference) and for other applications. There aren't a lot of data formats as well-understood and universal as HTML; that's worth taking advantage of. Remember, your HTML is likely to outlast whatever data source you're pulling your content from.

These days I depend on those semantics. I've been doing DOM work with Javascript to add dynamic annotation with margin notes and highlighting to web pages. I need to know the content model so I can determine where I can insert tags to add highlighting (<em> can go in <p> but not in <style>, for example). I locate highlights by counting words, so I need to know where words break. Block-level elements break words, while inline elements don't (so in your example you need a minimum of div, a, and span). I also collect other metadata, like the title and author of the annotated content, and so on. I do that by looking for elements in the document tagged with specific microformat classes.

What are the benefits? Well, if you look at my code, the output of my Javascript or my Atom feed, the information is all meaningful in a standard way. This can reduce or simplify glue code if you need to work with my data - and I think the universal experience with glue code is that although it seems simple and brainless, it gets heavier and heavier until it places serious limits on application complexity. Over time, I hope this kind of standardization can slowly lead to apps and libraries being easier to plug together. The standardization of HTML, and the shared meaning of some of its elements has already proved a huge win on the Web, messy, inconsistent, and broken as it is.

But I'm a geek of simple pleasures. Right now, I'm just thrilled that my transport format I picked - Atom (with embedded HTML) - is machine readable and shows up with sensible formatting in a generic feed reader. (I couldn't afford to use HTML if were a layout language, because then changing the look would break my machine parsing.) It's not rocket science - but that's kind of the point.