» 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).
••• today's entry continues here below •••
I said it before, but I'll say it again » now is a good time to learn how to build a web site (.. using HTML + CSS). A confluence of developments (including HTML5) make this a good time.
Everybody should have their own web site .. a place they call home .. however humble it might be. Everybody has an area of expertise .. whether professionally or as a hobbyist.
[ Note that today's entry talks about & deals with the Rad home page, and not the Movable Type blog entry you're reading right now. ]
» How to Work the HTML5 Mojo Today
In order to get your current XHTML web page to be able to use the new (semantically-rich) HTML5 elements, you need to do two things:
- Add Remy's HTML5-enabling script to the <head> of your new HTML5 web page, such as » <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
- Add a line at the top of your CSS to set the new HTML5 elements that you'll use to » display:block, such as (mine) » header, footer, nav, aside, article, section, hgroup { display:block; }
That's it (.. beyond the obvious <!doctype html>). Rock-n-roll, baby! Now all you need to do is sit back and wait for the rest of the web, including browser manufacturers, to catch up to you (.. you sexy early-adopter, you).
But these structural changes that you've made to the mark-up of your web page will do nothing to prevent your visitors from viewing your pages as they normally do (.. as you can clearly see here) .. EXCEPT in one case.
Which brings us to the biggest DOWN-SIDE to converting your pages to HTML5 today .. is that your styles wont render for the new HTML5 elements in Internet Explorer browsers that have Javascript disabled (.. either by personal choice, or by corporate security policy).
Since that percentage is so small, it's a caveat I'm willing to accept. In other words, they'll still be able to view your content; it just wont look pretty.
Speaking of STYLING your web pages .. the thing that makes it possible for us to use these new HTML5 elements TODAY .. even tho most browsers dont yet understand them .. and treat them like unknown elements that you make-up yourself .. is » CSS. That's right.
This is because CSS lets us style "any structured document" .. which includes HTML and XHTML, which is merely an XML version of HTML. And XML allows us to create any element we desire (.. such as <cool> and <gnarly> and <rad>).
So we can float <cool> to the right (or left), put borders around <gnarly> and apply both padding and margins to <rad> .. just like we can with <div>'s and <h1> headings. This really represents the essence of how we are able to use HTML5 elements today. CSS, baby. Powerful mojo.
Next I plan to convert the Splash page to HTML5. That should be much easier, much simpler.
Update - I created a quick mock-up to illustrate both pre- and post-HTML5 layouts. See here for the old (div-based) XHTML layout, and here to see how things have changed with new (semantically-rich) HTML5 layout, employing the new elements. ■
For more along these lines, here's a Google search preconfigured for the query » how to use new html5 elements guide
