I was kind of stoked to learn more about HTML 5 now that the IE9 beta is out.  I found a nice HTML 5 book on Safari Books Online (one of my favorite perks here at Microsoft) and started simple.  Things were going fine until I tried to view my simple code in IE9, FireFox 3.6 and the latest version of Google Chrome.  Here’s the HTML I wanted to render:

<!doctype html>
<html lang=en>
<head>
    <title>Home Page</title>
    <meta charset=utf-8>
    <link rel="stylesheet" href="/Content/Site.css">
</head>
<body>
    <header>
        <h1>Header Test</h1>

    </header>
    <article>
        <p>test</p>

    </article>
</body>
</html>

Pretty simple, right? The stylesheet I used was also very simple:



body
{
    font-family: Verdana, Geneva, Sans-Serif;
}
header
{
    font-size: 1.5em;
    font-weight: bold;
    color: #FF6600;
    background-color: #3399FF;
}


Well, here’s the output rendered by the three different browsers.   


image
IE9 Output


image
Mozilla Output


Not quite what I expected, but at least the two more or less agree.  However, look at what Chrome shows:


image
This is actually what I was expecting, but looks completely different from the above two.  Ugly, yes, but that’s my fault for the painful color choices.


So, I’m now discouraged from pursuing HTML 5 any further.  At least until the major players can get their collective acts together.  I have no desire to live through 1998 again.