Topic: DIVs in HTML5

Would anyone care to offer a bit of guidance on the use of DIVs in HTML5?

I'm aware that HTML5 gives options for more nuanced and semantic "blocks" than before. I get the impression in some circles that the DIV is as dead as the dodo. OTOH, it's still part of the spec, so it's difficult at that level to see what has changed wrt DIVs themselves. (That new working practices will develop is a given, I think!)

I ran across a helpful article that gives some perspective on this, but wondered what Godbitters might think. As one commenter asked (not me! but it's a good question, IMO), "Does this mean those html grid systems, with a gazillion div’s, will go away?"

Nathan? Anyone?

David Reimer  //  ↪ "If you know the resurrection is coming, it's impossible to be in utter darkness." — Tim Keller ↩

Re: DIVs in HTML5

Interesting questions and thanks for sharing those links. I have yet to really use the new HTML 5 elements (aside, section, article) and I'm no expert on grid systems but most of them are using classes and don't specifically require you to use a div. So I would figure you could use any of the HTML5 elements and simply just apply one of the grid system classes to it and you'd have the same effect. It's really up to you as the person creating the web page.

Take for instance the 960.gs. Nowhere in the CSS does it say

div.grid_8

it's simply just

.grid_8

, so just apply that to your

<section>, <aside> or <article>

tags.

Exercise your faith!

Re: DIVs in HTML5

Divs will be less needed, since more semantic tags will be available. So instead of having a blog post in a <div>, you'd use the <article> tag. As for grid systems, whoever said that quote about them going away because they're dependent on the <div> tag doesn't really understand why grid systems exist. They solve a layout problem, which (unfortunately) still exists even though newer HTML5 tags will make using <div> less prevalent.

Grid systems will die off eventually. In fact, I hope they do. It should be easier to do page layouts. I'm hoping one of the several proposed W3C layout specs will eventually be implemented by all browsers...

http://www.w3.org/TR/css3-grid/
http://www.w3.org/TR/css3-layout/
http://www.w3.org/TR/css3-multicol/

Once we can reliably use these types of techniques in all browsers with significant market share, the need for grid systems will be obviated. It'd be a shame if grid systems are still needed 10 years from now.

Give me liturgy or give me death.

Re: DIVs in HTML5

Thanks Yannick, Nathan. Helpful comment!

I suppose I need to do more reading/research. It looks as though the venerable DIV -- as a "generic" element -- will remain useful and in use, especially in constructing "Zen Garden" type layouts where an "aside" with one style sheet might appear as a "footer" in another. (How do you handle that scenario in HTML5?)

It's also difficult to know if things like "header" will become obligatory for any type of heading (section? sub-section? sub-sub-section?) or just with site header or article heading (what I think of as "h1" and "h2" -- and I know there's a debate about that, too!). With the old DIV, you use it where it is structurally required. But the mixing of structure and semantics is going to take some thinking through -- for me, anyway! (And weren't we all about disentangling these things not so long ago?)

Some HTML5 things are already dated, it looks like, but these two have proved helpful:

http://www.sencha.com/blog/2010/05/23/h … -internet/

http://www.cameronmoll.com/archives/200 … for_html5/

Maybe there's a decent Godbit (or Godsporch or Sonspring wink ) article in this somewhere! I'm probably getting the wrong end of the stick on some of this, so the discussion is appreciated!

Last edited by DjR (2010-10-30 01:42:17)

David Reimer  //  ↪ "If you know the resurrection is coming, it's impossible to be in utter darkness." — Tim Keller ↩

Re: DIVs in HTML5

Here's another useful article I just ran across:

http://html5doctor.com/designing-a-blog-with-html5/

I thought I might as well dump these things here -- might make a useful thread for a while, anyway!

(I found the link above from http://html5boilerplate.com/ ... somehow!)

2010.11.03 - And how did I miss this before? http://diveintohtml5.org/

Last edited by DjR (2010-11-03 00:40:47)

David Reimer  //  ↪ "If you know the resurrection is coming, it's impossible to be in utter darkness." — Tim Keller ↩

Re: DIVs in HTML5

Time to reply to my own post again. Great resource from Ian Hixie and Ben Schwarz:

HTML5: A technical specification for Web developers

Nathan will be so pleased that the forum is still alive.

David Reimer  //  ↪ "If you know the resurrection is coming, it's impossible to be in utter darkness." — Tim Keller ↩

Re: DIVs in HTML5

Good resource David. smile

Exercise your faith!