After giving the talk "Web Trends- the Do's and Don'ts of using html5" at a local conference, web trends have been on my mind a lot lately. You see, I've been designing websites since 1998- back when banners, rollovers and tables ruled the web. We've gone through a lot of stylistic trends since then, fumbling blindly in the darkness, trying to find where usability and aesthetic design meet. What's interesting to me is that, visually, we can achieve much more complexity than we could in the beginning, while, markup-wise, we are actually writing cleaner and easier-to-read code.

I'm always up for Some Antics

I am, of course speaking of semantic markup in html5. When I say "semantic markup" I mean markup that is more meaningful than just <div> or <span>. In html5 there are new tags like <header>, <footer>, <nav> as well as <video> and <audio>. These actually help to look at the html markup and, in a very humanistic way, understand what you're looking at. Long gone are the days of tables within tables and now divs within divs. You can (just about) write page markup with the minimalism that the original (unstyled) html1 pages were. It is a beautiful thing!

The Cascade Range

This is only possible because of the CSS3 (Cascading Stylesheets 3) specification. CSS3 allows an almost complete separation of church and state design and markup that can style (with minimal code) any element on your webpage. This allows you to have the most uninterrupted semantic markup possible, while designing your page any way you like.

CSS came along in 1996, but wasn't getting used broadly until the turn of the century (sounds old, huh?) enabled designers to finally get access to the toolbox they always had in printing- tools like kerning and leading, padding and margins. Also, it finally freed us from tables- though it took some of us longer than others to get on the bandwagon.

CSS2 was a set of standards that never really got broad enough support to use in browsers to be reliably used. The "absolute," "relative," and "fixed" positioning statements code be used somewhat reliably but usually fell apart when you viewed it in Internet Explorer (like most standards).

CSS3 enabled us to do even more as designers: rounded corners, shadows and better supported web fonts (Yes! We can finally use something other than Arial and Times!).

Javascript Magic

We have meaningful markup and wonderful design capability: now for the magic! Javascript has been with us almost as long as the first browser has been around. It's been a love-to-hate relationship with us web folk for years. No one browser seemed to stick completely to standards in the scripting language. While Microsoft and Netscape were trying to follow the scripting standards setup in the ECMAscript specifications, both liked to add their own "special sauce" that made their own browsers do more. Web designers and developers had to create multiple versions of their "rollover" scripts just to accommodate the two browsers. We hated it!

Then, along came javascript libraries! Prototype, Script.aculo.us, YUI, Moo Tools, and the big one, jQuery. These are prewritten and pretested for cross-browser-compatability javascript code that you could include in your website and use to create some phenomenal effects and functionality. What's best, you can use this stuff with abandon, as it works in almost every browser reliably!

The Complete Unabridged Director's Cut in High Definition Widescreen (Complete, with Lost Tom Bombadil Scene)

This magical triumvirate of standards-based technologies enables us designers and developers create truly beautiful, meaningful, and best-practice-compliant websites. Does this mean we will finally get it right? Probably not. But we finally have the tools to try!