At IBM, I work on a common front-end
(html/css) code base for our Lotus Applications. As part of that
work, I keep an eye on future trends. One of those trends is HTML5.
Back when we began implementing it in our code, it was even newer
than it is now. But it looks like it is here to stay, and there is a
way to use it now without much risk, setting your code up to move
into the future when even more HTML5 goodies are made available and
accessible by the browser. Here is how we did it and the pieces we
Put the HTML5 doctype on your page
And this is all that's needed for the html element:
It's really that simple. Is that not cool? That's one doctype I can
remember! It's the smallest doctype that all browsers recognize (or
at least back to Internet Explorer 6). It is a strict doctype. But
you can use either HTML or xHTML syntax, HTML5 views both as valid.
is one funky thing I discovered about strict mode (before that I
coded in xHTML transitional). In
strict mode, an image, considered inline, includes 4 pixels of
spacing at the bottom for the “descender.”
Sometimes this improves alignment. Sometimes it doesn't. Some workarounds:
- Try setting vertical-align:bottom; If that doesn't work, play around with other vertical alignment values. It's all kind-of dependent on what's around the image and the alignment you want.
- Try setting display:block; and float:left;
Use HTML5 elements, where they make sense, to structure your page
Style using classes
<p>We assigned classes to our html5 elements rather than styling them directly</p>
<p>For us, this gives teams picking up our code the option to either convert over to the newer HTML5, or leave things as divs for now until they have more cycles. Maybe you don't need to do that for your project. But I kind-of liked doing things that way and it especially worked nicely as I was learning all the new elements and the best places to use them.</p>
Use IE conditional comments
Conditional comments are how you define the elements to Internet Explorer.
This will get IE to recognize these elements and for you to be able to style them directly, if you choose to mingle that in with using classes.
(These are the ones we used in our projects)
Define HTML5 elements you use in your style sheet
<p>You'll have to define the HTML elements in your style sheet as display:block, so they will render correctly. Since the older browsers don't really understand them, they don't know what kind of display those elements should have. And so, we tell them... </p>
Use ARIA to make things accessible
<p>Accessibility compliance of HTML5 is incomplete in browsers, so you will still need to use ARIA. You'll note that the article element maps directly to the “article” role. And “nav” maps to the “navigation” role. Some day maybe HTML5 and ARIA will become seamless. Or at least HTML5 will alleviate some of the work we have to do to make things accessible. But things are not there yet.</p>
If you are ready to take this further, here are some useful links. Happy coding!