[html5] section vrs article

Lachlan Hunt lachlan.hunt at lachy.id.au
Thu Dec 4 10:12:20 PST 2008


Stephen Stewart wrote:
> Hi,
> 
> Sorry if this is obvious but which of the following is the more correct?
> 
> Example A.
> 
> <section>
>     <header>
>         <h1>Apples</h1>
>         <p>Tasty, delicious fruit!</p>
>     </header>
> 
>     <article>
>      The apple is the pomaceous fruit of the apple tree,
>     species Malus domestica in the rose family Rosaceae.
>     </article>
> </section>

This one could be correct if you replaced <article> with <p>.

> Example B.
> 
> <article>
>     <header>
>         <h1>Apples</h1>
>         <p>Tasty, delicious fruit!</p>
>     </header>
> 
>     <section>
>     The apple is the pomaceous fruit of the apple tree,
>     species Malus domestica in the rose family Rosaceae.
>     </section>
> </article>

Likewise, this one could be correct if you replaced <section> with <p>. 
  But note that while you can nest <section> within <article>, it's not 
really suitable to do so for this particular example.

You could expand it to use a nested section like this:

<article>
     <header>
         <h1>Apples</h1>
         <p>Tasty, delicious fruit!</p>
     </header>

     <p>The apple is the pomaceous fruit of the apple tree.</p>

     <section>
         <h1>Red Delicious</h1>
         <p>These bright red apples are the most common found in many
            supermarkets.</p>
     </section>

     <section>
         <h1>Granny Smith</h1>
         <p>These juicy, green apples and make a great filling for
            apple pies.</p>
     </section>
</article>


An article represents an independent, self-contained section of a 
document.  In a sense, it's like a specialised type of <section>. 
Nested <article> elements are suitable for related, but independent 
sections.  The example of this in the spec are comments submitted to an 
article or blog entry.

> <article>
>     <header>
>         <h1>Apples</h1>
>         <p>Tasty, delicious fruit!</p>
>     </header>
> 
>     <article>
>     The apple is the pomaceous fruit of the apple tree,
>     species Malus domestica in the rose family Rosaceae.
>     </article>
> </article>

This one is wrong because the nested article is not an independent section.

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/



More information about the Help mailing list