Cleaning up HTML

Quite some time ago, I coded up a PHP function that attempts to filter out potential nastiness in comments posted to MyPHPBlog sites (like this one). It’s mainly to keep people from injecting javascript into comments which could trigger Cross-Site Scripting problems. But I’ve never been completely satisfied with my solution. What I really wanted was a function that would not only filter for security, but would also turn the input into valid XHTML, automagically.

Simon Willison has come up with something that is a step in that direction: safeHtmlChecker. It’s a PHP class which will parse a chunk of XHTML and return a list of errors. But I want a class that will auto-correct the errors. Maybe it’s time to call upon the power of LazyWeb? Yes, I think it is….

LazyWeb, I invoke thee!

Tables vs. CSS

“I would like to get away from tables all together. Does anyone know of any
examples of markup for a tableless calendar?”

Where did this notion come from that if you are designing web pages using CSS that tables become some unmentionable evil to be avoided at all costs? There is a difference between the idea of “tableless layout” and “all tables are bad”. Tables are still a part of the HTML specs, and serve a very useful purpose. And, as others have already pointed out in the CSS-Discuss mailing list from which the above quote was taken, calendars are perfect candidates for tables.

Okay, actually I do know where that idea came from. You see, as modern web browers gained in user share, CSS became more and more of a viable option for web designers. And as more designers started realizing the advantages of separating “content” from “design”, they began to delve more deeply into the semantics of just what all those HTML tags are supposed to mean. The web is rife with discussions of <strong> vs. <b> and <em> vs. <i>. You see, <strong> and <em> have semantic meaning. They indicate that their content is important to the reader, whereas the <b> (bold) and <i> (italics) tags merely tell the browser to render text a certain way, without indicating why they are marked as such. A better example — if I have a bit of text marked up with the <i> tag, you have know way of knowing why I marked it that way. But if I use the <cite> tag, this adds meaning — the text is a citation. If I use the <kbd> tag, you can infer that this is something that you are supposed to type at your keyboard. If I use the <abbr> or <acronym> tags, you know that I’m using an abbreviation or an acronym.

Next, designers began to look at the issue of accessibility. This is where the table-less layout movement began. I don’t want to get into too much technical detail, so I’ll just point out that many people with visual impairments use special web browsers. Some are just text-based browsers, others use speech synthesis to read the content of a web page to the user. Some of these browsers don’t deal with tables well. Or they might try to deal with them well, but they can’t always know the intent of the web designer. For example, an audio browser will typically read the contents of a table from left to right, top to bottom. But what if a designer has used tables to lay out his content in a vertical fashion, so that you’re supposed to read content down one column, then up to the top of the next column? The screen reader will be reading the content out of order, causing some confusion. Again, savvy designers heed the call of “separation of content and presentation”, and the solution is to avoid tables.

Actually, that’s not true. The solution is to avoid tables for layout. Tables still have a purpose — they are used to markup content that is of a tabular nature. Calendars, for example. Or the periodic table of elements. Or your bank statement. There are countless good examples of when to use tables. And even using them for portions of your page layout isn’t totally evil, as long as you plan ahead and make an effort to keep your content organization logical.

If your web site is meant to be a visual attraction, then go hog-wild. Use whatever layout techniques get the job done! But if your site is about content — words, information, knowledge — then you should be thinking about how you can use semantic markup to add meaning. The chances are good that you will one day be glad that you did.

Related Links:

Busybusybusy

Sheesh, this has been a busy week. And it probably won’t be over until next week. We’re getting to roll out a new web site redesign at my work, so my team has been trying to crank through everything looking out for last-minute bugs and preparing the server for the switchover. We’re doing the switch on Tuesday morning, so Monday will probably be pretty hectic.

At least I’m finally starting to get over my sinus infection. The doctor prescribed Sudal for my congestion, and I found that it was keeping me up at night. After I figured out that it was the Sudal that gave me insomnia, I stopped taking it at night, and took some Tylenol P.M. and got a couple decent night’s sleep. But I’m still not completely caught up on rest though. Maybe I can get in a nap on Saturday (yeah, right, like that’s going to happen 🙂

In other news, since Susan got me that ZipZap for Christmas, I’ve been getting into the micro r/c thing. I’m going to try my first serious mod this weekend — I’m trying to adapt a Hot Wheels Car Tunerz body to fit on the ZipZap motorized chassis. If I can make it fit, it should look pretty slick. I’ll have to get some pics up here one of these days.

That’s what’s new with me. How about you?

Web Design-o-rama

Netscape has redesigned their DevEdge site with loads of standards-compliant goodness. Their hybrid CSS/DHTML menus are exactly what I’ve been looking for! Wow, not only do they use proper semantic markup for the menu structure, but advanced browsers (i.e. Mozilla-based) will still get the dropdowns even if Javascript is disabled. I believe the technical term for this is “cool sh*t”.

All your audio are belong to us

Audioscrobbler wants to know what you’re listening to. They’ve got a Winamp plugin (and one for XMMS) that keeps track of what artists you listen to, and aggregates statistics from all the Audioscrobbler users. You can view statistics on their web site to discover what artists are most popular, or get Artist Similarity Maps to find other artists that you might like.