[whatwg] article/section/details naming/definition problems

Wed Sep 16 08:37:32 PDT 2009

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/