The Obligatory Standards Rant

It seems every Web Developer type needs to have some sort of writing on their site advocating standards; I was waiting for an excuse to write something, and it was just a matter of time.

From a discussion on TheRoot42, a design forum:

i've heard that 'tables' are dead theory but the CSS-driven sites (for layout purposes) almost always look the same; one, two, or 3 column.

i don't see how it's possible to have a tableless site and "splice/weld" together a complex design.

..i don't understand why it's soo shunned now.

-"Colin"

I feel a rant coming on. The following was my reponse.

Why Standards?

It's about the way the code (HTML etc.) is written now and using web standards, hence this whole "XHTML" trend that's been catching on over the last year-and-a-half or so.

Even the WDDG has gone with an XHTML Strict DTD for their design. (DTD = Document Type Definition - it states what kind of HTML document, in this case, is being displayed.)

With an XHTML Strict DTD, there are certain rules that are to be followed by in terms of the code. For example, all tags (ie. <img /> must be "closed" - you can't use <img src="foo.gif" alt="foo"></img>, but <img src="foo.gif" alt="foo" /> is OK. Note the closing slash at the end.)

All attributes must also be lower-case, using "<img SRC=.." would be incorrect, but "<img src=.." is OK. Other rules like, block-level elements like DIV are not allowed inside inline elements such as SPAN apply - that kind of thing. "Nesting" rules that dictate how code should be structured.

Separation of Content and Style

Getting back to the table thing though - at the code level, tables do not have any semantic meaning; they are used for positioning and defining layout and are not "content". That is what going "standards" is all about, separating content and presentation.

Tables provide style because of rows and columns - but HTML should not provide style (presentation), it should provide data - content, that is.

eg.

<h1>this is a big-ass title</h1>

has more semantic meaning than

<font size="36">this is a big-ass title</font>

Why?

The font tag is deprecated and no longer in use - plus it has "inline" style - the HTML is providing the direction for how to display the content (size="36"), which is not separating the content from style.

The H1 is better because H1 has a meaning by itself - cell phones and text readers know that the H1 tag means "important!", so even without CSS they will render it bold, or larger than text inside a P tag for example. With browsers that do support CSS, you can do something like

h1 { font-size:32px; }

.. and change the behavior of all H1 tags on your site if you want, by doing so.

And that stuff is where? In an external, separate CSS file. Again the separation thing.

The benefits of XHTML

So you see where this comes to be beneficial. By separating content and presentation, you can serve the same content with different appearances (CSS Zen Garden, anyone? Hundreds of pages with totally (1) different (2) looks (3), no tables , and .. all those pages use the exact same HTML code - the only thing changing is CSS!)

According to the W3C (World Wide Web Consortium - the big kahunas of the Web,) tables are meant to be used for display of "tablular data" - that is, spreadsheets of financial data, rows and columns with short strings or numerical values etc. The problem is people have become so accustomed to using them for layout.

The technology is still developing (CSS isn't as consistent as tables across browsers and platforms without a few headaches, but it's getting better), but the same "tabular" effects can be achieved in using CSS for layout - and the code for sites that use CSS is beautifully clean. They load faster because there's less code to parse, external CSS and Javascript are cached and reused, and the base HTML (ie. your content , and therefore your site at the most basic level) degrades gracefully across older browsers and devices that don't support those technologies.

My site is perfectly legible on a cell phone for example, that does not support CSS nor Javascript - and it is a side-effect of my decision to write with standards in mind. Search engines love standards-compliant sites that separate content and presentation, because all they're concerned about is - guess what - content. Re: the FONT vs H1 example earlier: Guess which one the search engine is likely to interpret as being really "important!"

In closing

There are still a lot of improvements to be made to the technology, but things are improving dramatically. The number of sites redesigning (see The CSS Vault for some examples,) with standards in mind is growing, and it isn't just personal sites - large companies too. Hell, my current employer redesigned recently this way and was recognized for it. (I'll let you guess who was behind most of the client-side code structure.)

Alright I'm done now, seriously.

Related links