Div's Or?

[Kervtuza]

Hey All,

 

Just a few questions on html 5, right now when I am designing a page I will break it up with div tags

 

Ex: <div id="heading">

<div id="navigation">

 

Will <header> and <nav> tags eliminate the purpose of my using div tags for that? Are there any pros or cons to either or?

[kcmastrpc]

pro: using the new standard

con: old browsers freak out.

 

you'll need to use a html5 shiv to support older browsers...

 

http://en.wikipedia.org/wiki/HTML5_Shiv

[falkencreative]

Yes, header and nav tags will eliminate the need for those divs. I wouldn't say there's a big pro or con to either, since they ultimately do the same thing, but using the HTML5 elements makes your code a bit more semantic, and possibly cleaner since you can refer directly to the nav or header without the need for an id.

 

As KevinC said above, make sure you include the HTML5 shiv to provide support for older browsers, and you should be fine.

[AdamJack]

As far as i know HTML5 is the latest version of HTML and XHTML.W3schools tutorial is very useful for beginners and it is quick reference for the HTML 5 where every one can find all the input elements and attributes with there feature and its usage.

[Strider64]

I use a neat little hack for older browsers to see the newer html5 tags (It works pretty good for the most part).

 

In your css stylesheet put this at the top.

body, header, hgroup, nav, article, section, footer {
display: block;	
}

 

Then I created a javascript, (actually I use an external file and I know I am missing some tags(elements))

<!--[if lt IE 9]>
<script type="text/javascript">	document.createElement('header');
document.createElement('section');
document.createElement('nav');
document.createElement('aside');
document.createElement('article');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->

 

There's even external javascript scripts on the web that do the same thing (maybe even a little better); however, I having tested this with IETester and for the most part it does a pretty good job.

 

John

[grabenair]

This is wrong, The html tags you declared blocked are already block by default. You declare them just to make sure.

 

To make sure that the html5 tags work in IE 7 and 8 and 9 put this in the head because older IE does not recognize the new html5 tags and can display wrong.

 

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

I am not saying your javascript is wrong. Just that html5 tags are block by default.

 

What this is doing is checking to see if the browser is IE 9 or less. In the code [if lt IE 9] the lt is a lowercase L not an uppercase i. Stands for less then.

 

Also a very good reference to see what browsers support what is http://caniuse.com/ just click on one of the topics and it will take you to a link with a table that tells you the browser support. This site will also let you know if you need a prefix for css like -webkit- and so on.

 

Edited March 5, 2013 by grabenair