Is there any practical benefit of using <header> over <div id="header">?

Question

Is there any practical benefit of using <header> over <div id="header">?

and writing css for header {} over #header {}

I know one downside is , I will have to punish IE users with a Javascript if use <header> otherwise it will not take style.

I know it's HTML5 but is there any advantage of using it until non HTML5 supported browsers are still in use.

IE6, IE7, IE8 and some old mobile browsers do not understand these new tags.

Edit:

It's OK to use a JS Canvas library to do something awesome in all browsers but to use a Javascript just to use some tags in IE wil decrease performance without a big reason.

Answer 1

Besides the fact that it gives more meaning to the markup , when working with css you can more easily select the required items without resorting to id's or class.That reduces the amount of markup you are required to write , it makes mantaining the site alot easier and help other developers understand your code better if needed.

Answer 2

I don't know for a fact, but I think it almost certain that using semantically better markup (e.g. <header>) will help search engine crawlers construct a better image of your website.

There is probably no other practical benefit of going HTML5, and even the above is not exactly tangible. So in practice I don't really believe you can argue that going HTML 5 (and doing the extra work needed to make your page compatible with earlier IE versions) is going to be a good investment.

On the other hand, if you don't care about obsolete browsers then there's really no drawback.