HTML element with double attribute

Question

(The question below is hypothetical, but for reading convenience I'll ask as if I'm actually doing it)

I'm building a site in HTML 5. Unfortunately, IE doesn't support HTML5 elements like "header" and "nav". I was hoping it would treat them like generic "div"'s, but it doesn't. It simply acts as if they aren't there (meaning no CSS is applied to them).

I'd like to fix this by serving IE some dynamically transformed HTML. I'll just use the regular string replacement functions (of PHP, not that it matters) to replace all occurences of

<header>

with

<div class="header>

and so forth (an I'll transform the CSS accordingly). This should be fine, but what about this:

<header class="foo">

With the simplest replace code, this would become

<div class="header" class="foo">

Is that legal in HTML? And will the attribute then end up being "header foo" or just one of them?

(Yes, I do know that the normal way to get multiple classes is

<div class="header foo">

)

Answer 1

No, you can only have one class attribute - like this:

<div class="header foo">

If you have two or more class attributes, I think it just uses the first one.

Answer 2

If this is processed as XHTML it will be not-well-formed and throw an error and I would expect any conformant HTML parser to do this.

Answer 3

While it does rely on the client having JavaScript enabled, there is a method to get IE to work more properly with the new HTML5 elements:

http://remysharp.com/2009/01/07/html5-enabling-script/