Of HTML, tables, CSS, and more

February 15th, 2009

Here are a few quick thoughts about the sad state of modern web development and design.

The tables vs. CSS false dichotomy

Tables and CSS are not alternatives. They are not different technologies to solve a single problem. Tables are used to organize content into rows and columns. CSS is used to control how the content looks. CSS can by applied to other HTML elements do the work of tables, but it usually takes some extra markup and non-intuitive styles (like negative margins). If you want something with rows or columns, a table might be the best way to go, even if you’re not working with tabular data.

Separation of content and presentation is not enough

Despite what the mantra will lead you to believe, there are actualy three components to a web page: content, layout, and style. With just HTML and CSS, there’s no way to cleanly separate them. Layout always ends up in both the HTML and the CSS.

CSS, not CLS

CSS is for style. It’s good for things like colors, fonts, and decorations.

CSS is not for layout. Sure, it has position and float, and with enough markup you can make a page dynamic enough that the header, navigation, footer, and content can all be moved anywhere on the page. But that’s all very hacky. CSS has no concept of columns or rows, which make up the basic layouts for a lot of pages. There’s no simple or obvious way to make the vertical navigation and the content the same height.

Don’t write blog posts in HTML

Chances are you write content in one of a few ways. You either use a WYSIWYG editor that spits out HTML, or you write the raw HTML yourself, or you use something like markdown that gets converted into HTML. None of those ways get it right though, for a simple reason: content is not HTML. HTML is just one possible format the content can be in, and it’s a pretty bad format for what out content needs to do.

It’s better to use something else, like XML. Make up your own tags and define them how you want. So instead of <div class="aside">, you just have <aside>. And you can have <quote>, <thumbnail>, <spoiler>, and <subheader>.

XSLT is the way to go

I’ve never understood why XSLT, or something similar, never took off. It’s the perfect solution to a problem everyone has: how to make a website where the 3 facets - content, layout, and style - are truly separated.

The content is in the XML. The layout is in the XSL. And the style is in the CSS.

Do as I say, not as I do

This blog runs on Wordpress. I have the WYSIWYG editor turned off, so I write the post HTML by hand, and every time I do one like this I have to double-check whether I need to use <h3> or <h4> for the small section titles.

My theme template is about as ugly as it gets, with PHP and HTML alternating almost every line. It doesn’t use tables and I had to use trial-and-error to get the header off to the side like that, without any space above the post content. It was worse back when the navigation had a black background, and I had to use the border-color and negative margin trick to make sure the entire navigation column gets the background color.

Unfortunately, I haven’t seen a blogging engine that would let me use XML and XSLT instead of HTML templates.

Leave a Reply

Name

Website

Comment