HTML5: What's the difference between a div and a section?

[lastlifelost]

Divs and Sections: they're essentially interchangeable, right? I'm coding my first HTML5 page and I'm wondering if there's a time that one is more semantically correct than the other. For instance, would the main content for my site belong in a section, or should I use a div like I used to? Also, would the subsections in a page's content section be sections, divs or articles? The HTML5 spec suggests that an article should be a standalone content block - something that could be presented independently of the rest of the content. Does this mean that the main content of my page should be an article and the inner portions should be sections? I think this is getting closer to the semantics I'd expect to see. What are the thoughts of the pros on this one?

[boen_robot]

A div is for any kind of division that doesn't have a better way of being expressed.A paragraph is also a kind of division, but you have "p" for that kind of division. A "section", I'd expect to be a collection of paragraphs and/or sections with a single heading for it. The spec doesn't make your document invalid if you have it otherwise, but that's what I'd personally deem semantically correct.A div is still useful for other kinds of divisions required by other stuff, such as fancy widgets or fancy form controls.

[lastlifelost]

OK, that helps. I was having a mini-breakdown thinking that I wasn't making my code properly semantic. I know that it won't kill the page, but I definitely want to be working toward the most current standards. I like your definition of a section as a cluster or paragraphs or content under a single heading. That really helped to clear things up for me.

[cousineaug]

A div is for any kind of division that doesn't have a better way of being expressed.A paragraph is also a kind of division, but you have "p" for that kind of division. A "section", I'd expect to be a collection of paragraphs and/or sections with a single heading for it. The spec doesn't make your document invalid if you have it otherwise, but that's what I'd personally deem semantically correct.A div is still useful for other kinds of divisions required by other stuff, such as fancy widgets or fancy form controls.

HTML 5 introduces many new SEMANTIC elements. As boen-robot said, a DIV is used where no other container is adequate.<section> <article>, <nav> and <aside>all have semantic meaning. A section or article could be composed of many paragraphs, images, objects, etc. all making up a "chapter" if you wish or a block of "text" that would stand on its own if cut out of the page.here is a sample markup from w3.org

<article> <header>  <h1>The Very First Rule of Life</h1>  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section>  <h1>Comments</h1>  <article>   <footer>	<p>Posted by: George Washington</p>	<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>   </footer>   <p>Yeah! Especially when talking about your lobbyist friends!</p>  </article>  <article>   <footer>	<p>Posted by: George Hammond</p>	<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>   </footer>   <p>Hey, you have the same first name as me.</p>  </article> </section></article>

it seems from this sample that articles can be nested though I have not quite understood the semantic meaning.aside is like sidebar or parenthetical expression. A way of denoting text that digresses for a moment from the current topic.Others like nav would be used to standardize the navigation section of the page - I gather to make ity easier for SMART browsers to locate the navigation section. This would be handy for aural browsers to either skip the nav or go directly to it to locate another page of interest.So yes there is a lot more coming in HTML 5 - support for it will come slowly as browsers adapt to the still moving target.before using elements like section and article, check that they are not rejected/ignored by the major browsers.Guy

[jeffman]

My impression is that for quite a few versions, all browsers but IE have supported the semantic-only HTML5 elements. They are essentially divs: block-level with no other default CSS rules, so supporting them is quite easy. Old versions of IE can be made to support them with a little bit of java script: annoying if you like efficient documents (as I do) but functionally harmless, especially if you put the code in IE-conditional blocks.And of course we realize that all modern browsers, including IE, support the HTML5 doctype.The HTML5 elements you want to be careful about are the ones that actually DO stuff.