- From: Jeremy Keith <jeremy@adactio.com>
- Date: Wed, 16 Sep 2009 16:37:32 +0100
Divya wrote: > this is my understanding of the differences between <section> > and <article>, forgive me if I am not rigorous in my usage of English: > > 1. section to "cut" or "section" different parts of the layout of the > webpage No. This is what <div> is for. <section> is for enclosing related content. <article> is for enclosing related content *that is also independent*. > 2. article is used for each similar content, each blog post in a set > of (1 > or more) blog posts, each user member avatar in a set of user member > avatars, each product in a set of products. Not necessarily. If you would use <article> for a page of 10 blog posts, you should also use <article> for a page containing only one of those blog posts. The context isn't as important as the content. If the content *could* stand alone, then you are supposed to use <article>. Whether or not the contact actually *is* standing alone (in the current document) doesn't matter. > 3. articles always occur within a section except in rare occasions > when > there is nothing else other than the specific article on the page as > content. No. There is no correlation. * <articles> do not need to be nested within a <section>. They can be children of the <body> element, for example (the body element isn't sectioning content although it is a sectioning root). * <articles> can be nested within an <article>. The spec currently advises doing this for blog comments (even though it's questionable whether or not those comments "stand alone"). * <section>s can be nested within an <article>. Different sections of a news story or blog post, for example. * <section>s can nested within a <section>. > The usecase that leaps to me is: > HTML 4: > > <div class="maincolumn"> > <div class="item"> > News entry 1 > </div> > <div class="item"> > News entry 2 > </div> > </div> > > HTML 5: > <section class="maincolumn"> > <article> > News entry 1 > </article> > <article> > News entry 2 > </article> > </section> This should probably be: <div class="maincolumn"> <article> News entry 1 </article> <article> News entry 2 </article> </div> > I often use <div class="item"> to mark up the smallest large unit of > content > that is repeatable and my understanding is that <article> would be a > good > replacement of that. Only if the content is independent. Otherwise use <div> (or <section> if the content is related). -- Jeremy Keith a d a c t i o http://adactio.com/
Received on Wednesday, 16 September 2009 08:37:32 UTC