Category Archives: HTML5

Getting Started with HTML5

At IBM, I work on a common set of UI components that various product teams use to build their pages. I wanted to switch that code over to HTML5. Some product teams wanted to start using it. Some wouldn’t be changing their code. How to make everybody happy? Switch to HTML5 in a way that xHTML/HTML would still work. Here’s how to do that in 3 easy steps:

Change your doctype and html tag

<!DOCTYPE html>
<html lang="en-US">

Or, leave your existing tags in place

Define the elements to IE

<!--[if IE]>
<script>
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
...and any other elements you are using
</script>
<![endif]-->

Or don’t.

Define the elements in your CSS

/*html5 elements*/
article, aside, footer, header, hgroup, nav, section {display:block;}

Or leave them out.

Style using classes

This is the key point.  If you do your styling using classes you can assign them to either your new HTML5 elements, or your old DIVs.  And then your stylesheet will plug into either kind of page.

The only gotcha I’ve found

HTML5 is considered strict mode.  In strict mode, an inline image includes 4 pixels of space at the bottom for the descender.  This means there can be differences in image alignment between HTML5 and a transitional doctype.

There are a couple of solutions you can try if you don’t like the alignment of your image with the surrounding elements.  Play with vertical-align.  Try vertical-align: bottom to start.  And if you can, try setting display:block on the image – not a good solution if you are trying to keep your images inline, but just throwing it out there, because it does remove that invisible 4 pixels.