Jump to content
Sign in to follow this  
lastlifelost

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Edited by Deirdre's Dad

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...