» Notice anything different about the Rad home page? (Hopefully not much.) For a cool surprise, scroll down to the bottom (of the home page) and click the link labeled » Validate.
That's right, dawg! » 100% valid HTML5! .. employing a handful of new, semantically-rich HTML5 elements ..
.. such as » <header>, <footer>, <article>, <section>, <nav>, <aside>, <hgroup> & <time> (.. including the datetime & pubdate attributes) ..
.. most of which are designed to replace the semantically-vague » div tag .. used so prevalently in HTML4 & especially in XHTML layouts.
[ The HTML5 spec contains 28 new semantic elements. ]
I'm not talking about a div-laden page which merely contains an HTML5 <!doctype>. No, sir. We're talking about honest-to-God HTML5 mark-up. I also implmented significant WAI-ARIA features (via the role attribute) which are invalid in HTML 4.
[ The term semantics simply means that the new elements used to mark-up the web page have more MEANING. In other words, they're more descriptive, and browsers will therefore be able do more things with them (.. when they become HTML5-aware in the coming months). ]
Call me Mr. Early-Adopter. More to come on how I accomplished this (.. much hair-pulling, my first jQuery script, headaches, burning eyeballs, etc.). But right now I need to re-screw my head on straight. (Might take me a while.)
There are still a few minor glitches I need to iron out, but nothing I'd consider a deal-breaker.
[ Special thanks to the Excavator (Alaska) for helping with the jQuery script. (Yeah, that's something I need to learn.) ]
Modifying the mark-up itself was actually the easy part (.. after reading the excellent book by Remy & Bruce). Fun stuff. On the other hand .. converting my previous CSS-styles to target the new HTML5 elements .. that turned out to be the tricky part.
With CSS, if you omit even a single comma, your whole page-style falls apart in grand fashion. And it can be difficult to find something like a missing comma.
» Headaches of Being an HTML5 Early-Adopter
But my BIGGEST headache (by far, surprisingly enough) .. was getting the dang column lengths equal. What a pain that was!
I searched long-n-hard for answers .. googling queries such as » html5 equal height columns script.
Was surprised to find nothing helpful. If you really wanna torque your brain nicely, take a gander at THIS page (.. titled » Equal Height Columns with Cross Browser CSS). I mean, you start to get the feeling » Just shoot me now. (And note that I understand CSS pretty well.)
Regulars may recall that getting equal column heights/lengths was the first problem I ran into .. way back (in 2007) when I was trying to convert the home page from a table-based layout to pure CSS.
Seems it's STILL a royal pain .. cuz my old matching_columns script wouldnt work in HTML5 (.. despite tweaking the 'div' to 'section' .. and pleading desperately).