This is an interesting idea that I just came across today. The idea is to use the HTML5 elements (i.e. <header>) and instead of using a javascript shim you place a <div> with a classname inside the element.
Here is what the code would look like:
<header>
<div class="header"> ... </div class="header"></header>
There is also the option of nesting the the elements, as descriped here.
If I had to support old browsers with javascript turned off, I might think about doing this but I really dislike writting junk HTML. I tend to use a javascript shim or modernizr even with the issues they cause.
I am always trying to figure out if I should use a header and format it differently because of the way the design is or if it makes more sense to use another element. It would help if every designer I worked with understood the DOM and would give me consistent header designs but I can’t always push back on something that seems so trivial.
This article really helped me figure out a tactic that I can use to style the various headers I have scattered around.
An article that goes over what the HTML5 section element is and when to use it.
